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定位文本元素，这是一种愚蠢的可能性：

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

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

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

范围

应该适用于每个符合SVG的实施。

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

兼容性

文字'方向'更改应该在内部<tspan>上施加正常工作。

必须在外部<text>上施加非标准'书写模式'。肯定会有问题。

可能更重要的'text-anchor'值中间和 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>

结束‹space›.标记之前的<\text>会产生等于负x坐标的间距。因此，内部<tspan>会被移动，但会保留<text>中的空格，就好像它仍在那里一样。

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

Answer 4

目前看来，根据Shelley Powers，A List Apart Article“Using SVG for Flexible, Scalable and Fun Backgrounds: Part I”和“Part II” - CSS目前最适合SVG的定位。实际上，将SVG合并到网页中似乎是一个非常严峻的领域，而不是直接将其嵌入到html本身中。

我希望有一些解决方案可以找到，事实上，Powers确实提供了一些解决方法，以便为SVG正确分离样式和内容。我猜想当前的问题是概念/标准的相对新概率（相对于，例如.gif甚至.png ...），遗憾的是。

对不起，我无法提供更好的答案。 = /

Answer 5

使用css定位：

的index.html

<link href="style.css" rel="stylesheet" />
<div class="parent">
  <div class="child">
    <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>
  </div>
</div>

的style.css

.parent {
  position: relative;
  height: 1000; /* bigger than your svg */
  width: 1000; /* bigger than your svg */
}

.child {
  position: absolute;
  top: 10px;  /* relative to parent container */
  left: 10px; /* relative to parent container */
}

Answer 6

polygon r =“7”id =“map_points_55”points =“23,10 15,27 34,16 10,16 31,27”style =“fill：lime; stroke：purple; stroke-width：0;填写规则：非零;”

如果你想移动星星然后加点到10点或更多点，如点=“33,20 25,37 43,46 20,26 41,37”

Answer 7

我警告你我是一个相对初学者，但是“x”和“y”怎么办，并用数字和“px”分配这些

也许：

left: 290px;    top: 1200px;

或

x:30px; y:50px;

和

text-anchor:start;

样品：

<text
       xml:space="preserve"
       style="font-size:32;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Comic Sans MS;-inkscape-font-specification:Comic Sans MS Bold"
       x="131.42857"
       y="269.50504"
       id="text2383"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan2385"
         x="131.42857"
         y="269.50504">Position ze text</tspan></text>

使用CSS定位SVG元素

7 个答案:

范围

兼容性

使用css定位：