Question

我想将特定的复合形状移动到＆lt; Symbol＆gt;定义，然后重新使用它。这有助于使SVG代码更整洁，并对该形状的实际结构提供一些全局控制。形状关于给定的中点对称;然而，后续＆lt; Use＆gt;的x / y坐标。语句需要引用左上角而不是它的自然原始，这意味着所有形状的使用必须知道它的总大小。有没有办法按照左上角以外的某个原点来定位符号？

受挫的例子，纯粹是为了更好地解释这一点。以下同心圆符号具有自然起源。但是，随后的Use语句必须将其x / y坐标偏移一半符号大小才能正确定位（在此示例中为20,20）。理想情况下，符号的使用不应该知道这些信息。

<defs>
  <symbol id="ex">
    <circle  fill="green" cx="8" cy="8" r="8"/>
    <circle  fill="white" cx="8" cy="8" r="6"/>
    <circle  fill="green" cx="8" cy="8" r="4"/>
  </symbol>
</defs>


<use xlink:href="#ex" x="12" y="12">

Answer 1

符号的缺点是它会在视口的边界处切割渲染。（这也是一个好处，因为你可以定义一个viewBox。）但你可以完全避免使用它。 <defs>元素中的所有内容都不会直接呈现，因此您可以将<symbol>换成<g>并将所有内容放在原点上：

<defs>
  <g id="ex">
    <circle  fill="green" cx="0" cy="0" r="8"/>
    <circle  fill="white" cx="0" cy="0" r="6"/>
    <circle  fill="green" cx="0" cy="0" r="4"/>
  </g>
</defs>

<use xlink:href="#ex" x="12" y="12">

http://jsfiddle.net/nuzwn07n/

Answer 2

如果我正确地阅读了您的问题，您希望能够说出

<use xlink:href="#ex" x="20" y="20">

..然后圆形符号的位置为 center ，位于[20,20]。我建议的解决方案要求您知道符号的大小，但只能知道一次（在<symbol>声明中），而不是每个<use>元素。

1：在<symbol>中，将所有内容放在translate的组中，以便图形中心位于左上角。

<symbol id="ex">
    <g transform="translate(-8,-8)">
        <circle ...
    </g>
</symbol>

2：如果你现在<use>那个符号，你只能看到仍在符号“视口”内的四分之一圆。要显示整个圈子，只需将overflow="visible"应用于<symbol>。

<symbol id="ex" overflow="visible">
    <g transform="translate(-8,-8)">
        <circle ...
    </g>
</symbol>

http://jsfiddle.net/0ghucsrp/

SVG符号的坐标原点

2 个答案: