使用CSS定位SVG元素

Question

假设以下svg文档:

<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>

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

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

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

Answer 1

我已经设法使用以下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中崭露头角......

Answer 2

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

transform: translate(100px, 100px)

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

<path>
<polygon>
<g>

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

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

Answer 3

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

<defs>
    <font><font-face font-family="cssPosAnchor" />
        <glyph unicode="." horiz-adv-x="0" />
    </font>
    <style type="text/css"><![CDATA[
#cssPos {
    font-family:cssPosAnchor;
    letter-spacing:10px; /* x-coordinate */
}
#cssPos>tspan {
    font-family:serif;
    letter-spacing:normal;
    baseline-shift:-30px; /* negative y-coordinate */
}
]]>
    </style>
</defs>
<text id="cssPos">.<tspan>CSS-Positioned Text!</tspan></text>

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

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

范围

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

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

兼容性

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

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

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

<defs>
    <font><font-face font-family="cssPosAnchor" />
        <glyph unicode="." horiz-adv-x="0" />
        <glyph unicode=" " horiz-adv-x="0" />
    </font>
    <style type="text/css"><![CDATA[
#cssPos {
    font-family:cssPosAnchor;
    letter-spacing:100px; /* x-coordinate */
    word-spacing:-200px; /* negative double x-coordinate */
}
#cssPos>tspan {
    font-family:serif;
    word-spacing:normal;
    letter-spacing:normal;
    baseline-shift:-30px; /* negative y-coordinate */
}
#cssPos {
    text-anchor=middle;
}
]]>
    </style>
</defs>
<text id="cssPos">.<tspan>CSS-Positioned Text!</tspan> .</text>

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

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

Answer 4

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

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

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