SVG 边框出现修剪

Question

我想我在这里的第一个 svg 中遗漏了一个明显的偏移问题，顶部和左侧的边框被修改了(由红色箭头指向)，另外如果嵌套了 <g> 之类的东西或 <symbol>有可能请让我知道，谢谢。 (FF27 中的屏幕截图)

。

简化代码和 fiddle

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

.rings{fill:none;}

svg {
    width:600px;
    height:300px;
}

Answer 1

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

如果出于任何原因您不想使用 overflow:visible ，因此，另一种选择是只调整形状的位置，以便在边缘有一点填充，等于笔划宽度的一半。 (当然，这是假设每次使用符号时笔画宽度都相同。)

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

然后“嵌套 SVG”被定位，使其左上角位于 <use> 中指定的 (x,y) 位置。元素，但就符号内的绘图内容而言，该视口(viewport)的矩形边缘是绘图表面的边缘。当然，除非您像@helderdarocha 所建议的那样明确允许溢出。

(顺便说一下，symbols-are-drawn-as-nested-SVGs 的想法可能就是你需要为 Firefox 指定 svg{ overflow:visible;} 的原因，尽管它确实应该通过直接在符号上设置属性来工作；我' d 称之为 Firefox 错误。)

关于您的其他问题: <g>元素可以毫无问题地嵌套多次。对于 <symbol>元素，不是很清楚。 The specs说符号很像<g>元素除了 (a) 它们有视口(viewport)和 (b) 符号不是直接绘制的，它仅供 <use> 引用。元素。

现在，这表明 <symbol> s 可以像 <g> 这样嵌套元素。在 Chrome 上它可以工作。在 Firefox 上，不是那么多。我假设发生的事情是当 Firefox 复制外部 <symbol> 的内部内容时, 它对待内部 <symbol>元素就好像它们只是符号定义，而不是它们是这些符号的渲染。

即像这样的代码

<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“错误”，只是对规范的字面解释，它不会对嵌套的符号元素给予任何特殊处理。

然而，有一种方法可以让符号嵌套，那就是使用<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>

这是使用该结构更新的 fiddle :http://jsfiddle.net/vGNMu/6/