如何定位SVG中的"g"元素

Question

我有一个SVG元素，它是一个箭头进入一个圆形：https://jsfiddle.net/seabon/806ew03a/

<svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"                          viewBox="15 15 102 102" style="enable-background:new 0 0 132 132;" xml:space="preserve" data-link="go_down">
            <g class="cross-circle">
                <g class="go-clockwise">
                    <circle class="st0" cx="66" cy="66" r="43.7"/>
                </g>
            </g>
            <g class="down">
                <polyline class="st1" points="76.4,71 66,81.4 55.6,71 "/>
                <line class="st1" x1="66" y1="81" x2="66" y2="47"/>
            </g>
</svg>

我想使用CSS翻译箭头的位置。我尝试在具有“down”类的g元素上使用相对位置，但它不起作用。我尝试放置foreignObject，但也不起作用。是否有人有想法？

- Mr.Smith67

---

我认为你不能通过CSS在SVG中定位元素。 定位是通过属性值而不是样式值完成的。 - Sirko

如果我想要在不使用translate（）属性的情况下对g元素进行动画处理，应该如何实现？ - Mr.Smith67

您可以使用SVG动画，例如： - Sirko

这个回答解决了你的问题吗？SVG定位 - frederj

Answer 1

您可以在CSS样式表中添加transform:translate()规则。应该可以工作：

svg .down {
  transform:translate(0,-4px);
  transition:transform 0.3s;
}
svg:hover .down {
  transform:translate(0,4px);
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
     viewBox="15 15 102 102" width="200" height="200">
  <g>
    <g>
      <circle class="st0" cx="66" cy="66" r="43.7" fill="#f00"/>
    </g>
  </g>
  <g class="down">
    <polyline points="76.4,71 66,81.4 55.6,71" fill="#fff"/>
    <line x1="66" y1="81" x2="66" y2="47" stroke="#fff"/>
  </g>
</svg>

- r3mainer