Question

我认为我在第一个svg中错过了一个明显的偏移问题，顶部和左边界是tirmmed（用红色箭头指示），还有嵌套<g>或{{ 1}}可能请求让我知道，谢谢。（FF27截图）

。

enter image description here

简化代码和fiddle

<symbol>

<svg>
    <defs>
        <symbol id="ringCenters" style="fill:black;">
            <circle cx="50" cy="50" r="2" />
            /*...more circles*/
        </symbol>
        <symbol id="ring1" class="rings">
            <path d="M99.9746,51.5943 
                     A50 50 0 1 0 
                     62.5254,98.4057" 
                     stroke="green" />
            <path d="M99.9746,51.5943 
                     A50 50 0 0 1 
                     62.5254,98.4057" 
                     stroke="red" />
        </symbol>
        /*...more rings*/
    </defs>
    <use xlink:href="#ringCenters" x="10" y="10" />
    /*...more rings*/
</svg>

Answer 1

你的一半笔画在viewBox之外。您可以使用以下方法避免剪裁：

svg, symbol {
    overflow: visible;
}

或为每个符号添加overflow="visible"属性。

您的updated JSFiddle

Answer 2

形状周围的笔划始终居中在形状的精确几何边界上，因此延伸超出形状的笔画宽度的一半。

如果由于任何原因您不想使用overflow:visible，则另一个选项是调整您的形状的位置，以便您在边缘上有一点填充，等于笔划宽度的一半。（当然，假设每次使用符号时笔划宽度都相同。）

请注意，您必须调整<path>中<symbol>的位置，而不仅仅是SVG中<symbol>的位置。这是因为每个对符号元素is drawn as if it was a nested <svg> element的引用都在它自己的视口中，具有固定的高度，宽度和“viewBox”坐标系。您没有在符号上设置这些属性，因此它们最终成为嵌套SVG的默认值：宽度和高度等于父级的100％，以及默认坐标系（左侧角为（0,0））视口。

然后定位“嵌套SVG”，使其左上角位于<use>元素中指定的（x，y）位置，但就符号中的绘图内容而言，该视口的矩形边是绘图表面的边。当然，除非你特别允许溢出，正如@helderdarocha建议的那样。

（顺便说一下，符号被绘制为嵌套的SVG想法可能就是为什么你需要为Firefox指定svg{ overflow:visible;}的原因，尽管它确实可以通过直接在符号上设置属性来实现;我称之为Firefox错误。）

关于您的其他问题： <g>元素可以多次嵌套而不会出现问题。对于<symbol>元素，它不是那么清楚。 The specs表示符号与<g>元素非常相似，除了（a）它们有视口和（b）符号不是直接绘制的，它仅供<use>元素引用。

现在，这表明<symbol>可以像<g>元素一样嵌套。在Chrome上它可以工作。在Firefox上，没有那么多。我假设当Firefox复制外部<symbol>的内部内容时，它会将内部<symbol>元素视为符号 definitions ，而不是它们是那些符号的效果图。

即。像这样的代码

<svg>
  <defs>
    <symbol id="complicated">
       <symbol id="firstPart">
            <path d="...."/>
       </symbol>
       <symbol id="secondPart">
            <path d="...."/>
       </symbol>
    </symbol>
  </defs>
  <use xlink:href="#complicated"/>
</svg>

呈现就像是

一样

<svg>
  <defs>
    <symbol id="complicated">
       <symbol id="firstPart">
            <path d="...."/>
       </symbol>
       <symbol id="secondPart">
            <path d="...."/>
       </symbol>
    </symbol>
  </defs>
  <g> <!-- The <use> element is drawn as if it was a <g> element -->
     <svg> <!-- The <symbol> element is drawn as if it was a nested <svg> -->
       <symbol id="firstPart"> <!-- the internal symbol is copied as-is -->
            <path d="...."/>
       </symbol>
       <symbol id="secondPart"> <!-- but symbols aren't drawn directly! -->
            <path d="...."/>
       </symbol>
    <svg>
  </g>
</svg>

......而且这根本不应该被渲染为任何东西。这个，我不会称之为Firefox“bug”，只是对规范的字面解释，它不对嵌套符号元素进行任何特殊处理。

然而，有一种方法可以使符号嵌套，并且在符号定义中使用<use>元素：

<svg>
  <defs>
    <symbol id="firstPart">
        <path d="...."/>
    </symbol>
    <symbol id="secondPart">
        <path d="...."/>
    </symbol>
    <symbol id="complicated">
        <use xlink:href="#firstPart"/>
        <use xlink:href="#secondPart"/>
    </symbol>
  </defs>
  <use xlink:href="#complicated"/>
</svg>

这是你用这个结构更新的小提琴：http://jsfiddle.net/vGNMu/6/

SVG边框显示为修剪

2 个答案: