使用 jquery/javascript 设置 svg 的 y 位置

Question

我想在 svg 中为 tspan 设置 y 值。

svg是这样的（为简单起见，我删除了一些部分，完整代码在这里：https://0bin.net/paste/VKLkhpMK#HkAkhB0vVSN-ZVE9yUnWRkbgfzuN+S+bWt+U15wMJxe）：

<div class="chart" style="margin-top: -50px">
   <div id="jvwbtduzlfxnprgyeskhiqaoc" style="min-height: 288.7px;">
      <div id="apexchartsq5s3epfr" class="apexcharts-canvas apexchartsq5s3epfr apexcharts-theme-light" style="width: 270px; height: 288.7px;">
         <svg id="SvgjsSvg1001" width="270" height="288.70000000000005" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev" class="apexcharts-svg" xmlns:data="ApexChartsNS" transform="translate(0, 0)" style="background: transparent;">
            <g id="SvgjsG1016" class="apexcharts-datalabels-group" transform="translate(0, 0) scale(1)" style="opacity: 1;">
              <text id="SvgjsText1017" font-family="&quot;Nunito&quot;" x="138" y="138" text-anchor="middle" dominant-baseline="auto" font-size="16px" font-weight="600" fill="#008744" class="apexcharts-text apexcharts-datalabel-label" style="font-family: Nunito;">

                   <tspan id="SvgjsTspan1018">8 / 8 + 1</tspan> // set y="150" (the value for id is unique, so I can't using it)

               </text>
               <text id="SvgjsText1019" font-family="&quot;Nunito&quot;" x="138" y="170" text-anchor="middle" dominant-baseline="auto" font-size="14px" font-weight="400" fill="#373d3f" class="apexcharts-text apexcharts-datalabel-value" style="font-family: Nunito;">100%</text>
             </g>
         </svg>
      </div>
   </div>
</div>

我试过这样：

<script>
   $('.apexcharts-datalabel-label tspan').attr('y', 150);
</script>

但没有任何改变，我不知道为什么。我上面的代码适用于其他页面，但不适用于此页面。

Answer 1

以下选择器应该可以工作：

.apexcharts-text.apexcharts-datalabel-label tspan

所以查询将更改为：

$('.apexcharts-text.apexcharts-datalabel-label tspan').attr('y', 150);

使用 jquery/javascript 设置 svg 的 y 位置

Set y position of svg using jquery/javascript

javascript

jquery