如何定位一個「G」元素SVG

我的SVG元素，其是箭頭成一個圓圈：https://jsfiddle.net/seabon/806ew03a/如何定位一個「G」元素SVG

<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但不工作太..有沒有人有一個想法？

來源

2015-06-22 Mr.Smith67

我不認爲你可以在SVG通過CSS定位的元素。定位是通過屬性值而不是樣式值完成的。 – Sirko

如果我想在不使用translate（）屬性的情況下對g元素進行動畫製作，我該怎麼做？ –

您可以使用SVG動畫，例如 – Sirko

您可以將transform:translate()規則添加到您的CSS樣式表中。這應該工作：

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>

來源

2015-06-22 08:49:38

如何定位一個「G」元素SVG

回答

相關問題