使用CSS定位SVG元素

假设以下svg文档:

现在我想要做的是使用css重新定位此文本.

我试过添加和.两者对firefox和safari都没有影响.添加这些作为普通属性工作正常,但我不能将定位与实际代码分开.设置x,y,left并top在风格不工作要么.

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

1> pluke..：

---

我已经设法使用以下CSS在chrome中移动一些SVG文本:

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 */
}

然而,它并没有在Firefox中崭露头角......

---

我认为这是我见过移动文本的最耗费的方式之一

---

从Firefox 23开始,不需要`-moz-transform`; `-transform`工作正常!

---

你是对的,但遗憾的是SVG和CSS结合在一起我们现在也很喜欢.如果你有更快的方式,我很乐意看到它.

2> 小智..：

---

我来到这里寻找修复但是我自己解决了这个问题,以为我会分享:

transform: translate(100px, 100px)

似乎可以在除Internet Explorer之外的所有现代浏览器中工作,直到Microsoft Edge(甚至还没有出现),这非常令人失望.我测试的元素是:

我遇到的唯一问题是与元素,溶液有包裹在和改造应用到.这应该适用于我尚未测试过的任何有问题的元素transform: translate().

我没有找到适合Internet Explorer的后备,而是确保转换对SVG的功能并不重要.

3> Tobias Simon..：

---

通过滥用x坐标的属性'letter-spacing'和y坐标的'baseline-shift',这是一种纯粹由CSS定位文本元素的hacky可能性:

    
        
    
    

.CSS-Positioned Text!

'baseline-shift'仅适用于'tspan'元素,因此在所呈现的代码中使内部成为必要.基线移位的正值将文本向上移动,与svg中的法线方向相反.

'letter-spacing'需要一个首字母才能生效,从而做出.必要的.为了消除第一个字母的宽度,我们使用特殊制作的字体cssPosAnchor,其中点没有宽度,没有形状.以下还可以恢复字体和字母间距.

范围

应该适用于每个符合SVG的实现.

对于负x坐标,有一个不确定的限制.'letter-spacing'属性的规范说:"值可能是负数,但可能存在特定于实现的限制."

兼容性

当施加在内部时,文本'方向'的改变应该可以正常工作.

必须在外部施加非标准的"书写模式".肯定会有问题.

可能更重要的"文本锚点"值中间和结束可能是这样的:

    
        
        
    
    

.CSS-Positioned Text! .

在‹space›.闭合前<\text>标签产生间距等于负的x坐标.因此,内部被移动,但保留了它的空间,就好像它仍然在那里一样.

由于间距属性的负值可能存在特定于实现的限制,因此无法保证在所有客户端上都能正常工作!

4> David Thomas..：

---

目前看来,根据Shelley Powers的说法,在她的A List Apart文章 " 使用SVG实现灵活,可扩展和有趣的背景:第一部分 "和" 第二部分 " - CSS目前最适合SVG的定位.实际上,将SVG合并到网页中并不直接将其嵌入到html本身中似乎是一个很大的挑战.

我希望能够找到解决方案,事实上,Powers确实提供了一些解决方法,以便为SVG正确分离样式和内容.我不敢猜测当前的问题是概念/标准的相对新概率(相对于,例如,.gif甚至.png......),遗憾的是.

对不起,我无法提供更好的答案.= /