使用CSS定位SVG元素 [英] Positioning SVG elements using CSS

问题描述

假设以下svg文档：

 < svg version =1.1baseProfile =fullwidth = height =200xmlns =http://www.w3.org/2000/svg> 
< text x =20y =20>我的文字< / text> 
< / svg> 
  

现在我想做的是使用css重新定位这个文本。

我已经尝试添加 style =dx：20和 style =transform：translate（20） code>。两者在firefox和safari没有效果。添加这些作为正常属性工作正常，但然后我不能从实际代码拆分定位。
设置 x ， y ，左 top 在样式中也不工作。

有没有办法使用css定位svg元素？

解决方案

我已使用以下CSS移动了一些SVG文本：

  text.identity {
 transform：translate（74px，0px）; 
 -ms-transform：translate（74px，0px）; / * IE 9 * / 
 -webkit-transform：translate（74px，0px）; / * Safari和Chrome * / 
 -o-transform：translate（74px，0px）; / * Opera * / 
 -moz-transform：translate（74px，0px）; / * Firefox * / 
} 
  

但是， / p>

Assume the following svg document:

<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<text x="20" y="20">My text</text>
</svg>

Now what i want to do is reposition this text using css.

I have tried adding style="dx:20" and style="transform: translate(20)". Both have no effect in firefox and safari. Adding these as normal attributes works fine but then i can't split the positioning from the actual code. Setting x, y, left and top in the style isn't working either.

Is there a way to position an svg element using css?

解决方案

I've managed to move some SVG text in chrome using the following CSS:

text.identity{
transform: translate(74px,0px);
-ms-transform: translate(74px,0px); /* IE 9 */
-webkit-transform: translate(74px,0px); /* Safari and Chrome */
-o-transform: translate(74px,0px); /* Opera */
-moz-transform: translate(74px,0px); /* Firefox */
}

However, it's not budging in Firefox...

这篇关于使用CSS定位SVG元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！