SVG：我可以在樣式中的屬性中放置x和y位置嗎？

我想在課堂風格中加入定位x="50%" y="50%"。這樣做並沒有工作：SVG：我可以在樣式中的屬性中放置x和y位置嗎？

.centre { 
    x: 50%; 
    y: 50%; 
}

有沒有什麼辦法，包括在風格定位？

編輯：

基於答案，translate()應該做的工作，乃至下面的代碼片段顯示了它的工作。也就是說，如果你不使用Safari。

Safari似乎不喜歡在text元素上做這個...？

text.centre { 
 
\t font-family: sans-serif; 
 
\t font-size: .5em; 
 
\t fill: green; 
 
\t alignment-baseline: middle; 
 
\t text-anchor:middle; 
 
\t -webkit-transform: translate(50%,50%); 
 
\t transform: translate(50%,50%); 
 
}

<svg x="160" y="100" width="140" height="40"> 
 
\t <rect style="fill: lightgrey;" x="0" y="0" width="140" height="100"/> 
 
\t <rect style="fill: white;" y="10" x="10" width="120" height="20"/> 
 
\t <svg x="10" y="10" width="120" height="20"> 
 
\t \t <text class="centre">Hello</text> 
 
\t </svg> 
 
</svg>

來源

2017-08-05 Manngo

必須找到我的被測試iphone裝電纜... –

Safari瀏覽器是新的IE。對於引用這個問題的其他人來說：％in translate指的是元素大小的百分比，其中x/y在％中指的是viewbox尺寸，％in left/top（css）指的是父元素尺寸 – Apolo

您可以使用transform: translate(50%, 50%)第一是x的第二個爲y。如果您需要移動只沿一個軸或其他可以使用translateX(x)或translateY(y)

你可以閱讀更多here

來源

2017-08-05 02:49:17

顯然，是的，可以。如果您使用transform css屬性。請參閱附件中的片段。

svg { 
 
    border: 1px solid; 
 
} 
 

 
rect { 
 
    fill: red; 
 
    transform: translate(50%, 50%); 
 
}

<svg height="200" width="200"> 
 
    <rect height="100" width="100"></rect> 
 
</svg>

來源

2017-08-05 02:50:19

可以操縱與變換路徑的定位：翻譯（）;

所以儘量用

.centre{ 
    transform:translate(50%, 50%); 
}

操縱你想要的路徑也許你會想用一些供應商前綴爲跨瀏覽器

.centre{ 
    -webkit-transform:translate(50%, 50%); 
    -ms-transform:translate(50%, 50%); 
    transform:translate(50%, 50%); 
}

我用這個動畫這裏的標誌部分：http://fire.netzgestaltung.at

特定的SVG CSS屬性：https://www.w3.org/TR/SVG/styling.html

更多教程（換貨的動畫，但使用CSS）：

來源

2017-08-05 02:58:58

SVG：我可以在樣式中的屬性中放置x和y位置嗎？

回答

相關問題