自定义数据属性不起作用

Question

http://codepen.io/eamo2020/pen/mVNZbJ

我在svg图片中的圆形元素上有自定义属性，我正在尝试读取version的值并使用它来更新data-xPos位置，但我无法读取cx值

HTML

data-xPos

JS

<section class="map">
  <div class="image">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/f/f3/World_map_blank_gmt.png" />

      <circle data-xPos="0.5" cx="0.5" cy="27" r="1.2" fill="#0f0" stroke="#0f0" stroke-width="2" stroke-opacity="0.4"/>

    </svg>
  </div>
</section>

错误：width = document.getElementsByTagName("image")[0].parentNode.offsetWidth var circles = document.getElementsByTagName('circle') for (i = 0; i < circles.length; i++) { circle = circles[i] x = circle.dataset.xPos circle.setAttribute("cx", width * x) }