SVG边框出现修剪

Question

我想我在我的第一个svg在这里错过了一个明显的偏移问题，顶部和左边框是tirmmed（红色箭头指向），此外如果像嵌套<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的引用具有固定的高度，宽度和“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>元素视为它们只是符号定义，而不像它们是效果器那些符号。

I.e.这样

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

...这实在不应该在所有渲染成任何东西。这个我不会称火狐为“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/

Answer 2

您的行程的一半是视框外。您可以通过以下方式避免剪切：

svg, symbol { 
    overflow: visible; 
} 

或者将overflow="visible"属性添加到每个符号。

你updated JSFiddle