使用 CSS 定位 SVG 元素

Question

提问by Yorick Sijsling

Assume the following svg document:

假设有以下 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>

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

现在我想要做的是使用 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, leftand topin the style isn't working either.

我试过添加style="dx:20"和style="transform: translate(20)"。两者在 Firefox 和 safari 中都没有效果。将这些添加为普通属性可以正常工作，但是我无法将定位与实际代码分开。设置x，y，left并top在风格不工作要么。

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

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

Answer 1

回答by pluke

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

我设法使用以下 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 */
}

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

但是，它在 Firefox 中并没有改变......

Answer 2

回答by ryanpither

I came here looking for a fix but fixed the issue myself, thought I would share:

我来这里是为了寻求修复，但我自己解决了这个问题，我想我会分享：

transform: translate(100px, 100px)

Appears to work in all modern browsers except for Internet Explorer, right up until Microsoft Edge (which isn't even out yet) which is quite disappointing. The elements I've tested on are:

似乎适用于除 Internet Explorer 之外的所有现代浏览器，直到 Microsoft Edge（甚至还没有推出），这非常令人失望。我测试过的元素是：

<path>
<polygon>
<g>

The only issue I've had is with <text>elements, and the solution there is to wrap the <text>in a <g>and apply the transformation to that. That should also work for any elements I haven't yet tested that have issues with transform: translate().

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

I haven't found a decent fallback for Internet Explorer, instead I've made sure that the transforms aren't vital to the function of the SVG.

我还没有找到适合 Internet Explorer 的后备方案，而是确保转换对 SVG 的功能并不重要。

Answer 3

回答by Tobias Simon

Here is a hacky possibility to position specifically text-elements purely by CSS, by abusing the attributes ‘letter-spacing'for the x-coordinate and ‘baseline-shift'for the y-coordinate:

通过滥用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'is only applicable on ‘tspan'Elements, thus making the inner <tspan>necessary in the presented code. Positive values for baseline-shift move the text upwards, opposite of the normal direction in the svg.

'baseline-shift'仅适用于'tspan'元素，因此<tspan>在呈现的代码中需要内部。基线偏移的正值将文本向上移动，与 svg 中的法线方向相反。

‘letter-spacing'needs an initial letter to have an effect, thus making the .necessary. To eliminate the width of this first letter, we use the special made font cssPosAnchor, where the dot has no width and no shape. The following <tspan>additionally restores font and letter-spacing.

'letter-spacing'需要一个首字母才能产生效果，因此是.必要的。为了消除第一个字母的宽度，我们使用特制字体cssPosAnchor，其中点没有宽度和形状。以下<tspan>还恢复了字体和字母间距。

Scope

范围

Should work in every conforming SVG implementation.

应该适用于每个符合标准的 SVG 实现。

There is one indefinite limitation though for negative x-coordinates. The specification for the ‘letter-spacing' attribute says: “Values may be negative, but there may be implementation-specific limits.”

但是对于负 x 坐标有一个无限的限制。'letter-spacing' 属性的规范说：“值可能是负数，但可能存在特定于实现的限制。”

Compatibility

兼容性

Text ‘direction'change should work just fine, when imposed on the inner <tspan>.

文本“方向”更改应该可以正常工作，当施加到内部<tspan>.

A non-standard ‘writing-mode'must be imposed on the outer <text>. There will most certainly be problems with that.

非标准的写作模式“必须在外部强加<text>。肯定会有问题。

The probably more important ‘text-anchor'values middleand endcan be made possible like this:

可能更重要的'text-anchor'值middle和end可以这样实现：

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

The ?space?.before the closing <\text>tag produces spacing equal to minus x-coordinate. So the inner <tspan>is moved around but preserves it's space in the <text>as if it was still there.

在?space?.闭合前<\text>标签产生间距等于负的x坐标。所以内部<tspan>移动了，但保留了它的空间，<text>就好像它仍然在那里一样。

Since there may be implementation-specific limits on negative values for the spacing attributes, this is not guaranteed to work on all clients!

由于间距属性的负值可能存在特定于实现的限制，因此不能保证对所有客户端都有效！

Answer 4

回答by David says reinstate Monica

At the moment, it seems -according to Shelley Powers, in her A List Apart Article"Using SVG for Flexible, Scalable and Fun Backgrounds: Part I" and "Part II"- that CSS is not currently best-suited to positioning of SVG. In fact it seems to be quite a minefield to incorporate SVG into a web-page, without directly embedding it within the html itself.

目前，根据Shelley Powers 的说法，在她的A List 独立文章“使用 SVG 实现灵活、可扩展和有趣的背景：第一部分”和“第二部分”中，CSS 目前并不是最适合定位 SVG . 实际上，将 SVG 合并到网页中而不直接将其嵌入 html 本身似乎是一个雷区。

I hope that there are solutions to be found, and, indeed, Powers does offer a couple of workarounds, to enable proper separation of style and content for SVG. I'd hazard a guess that the current problems are the relative new-ness of the concept/standard (relative to, for example, .gifor even .png...), sadly.

我希望能找到解决方案，事实上，Powers 确实提供了一些解决方法，以实现 SVG 样式和内容的正确分离。可悲的是，我冒险猜测当前的问题是概念/标准的相对新颖性（相对于，例如，.gif甚至.png......）。

I'm sorry I can't offer a better answer. =/

很抱歉我无法提供更好的答案。=/

Answer 5

回答by Isaac Pak

Use css positioning: