Question

我有以下SVG代码。带有id＆＃34; nestedsvg＆＃34;的SVG正在HTML中附加，我可以在控制台上查看它。但它在屏幕上看不到。我尝试为它指定一个99的z指数，但它仍然是不可见的。我哪里错了？

<svg data="BusinessRoleFigure" x="144" y="95" 
width="128" height="66" id="outer" style="position: relative;">

<rect x="0" y="0" width="100%" height="100%" 
stroke="rgb(178,178,126)" stroke-width="1" fill="rgb(255,255,181)"
 style="position: relative;"></rect>

<svg id="nestedsvg" x="100%" height="100" width="50">
<rect x="-50" rx="5" ry="5" width="20" height="10" stroke="black"
 stroke-width="1" fill="black" z-index="99"></rect>
 </svg>

 <circle cx="118" cy="13" r="5" fill="none" 
stroke-linejoin="round" stroke="black" 
z-index="1" stroke-width="1"></circle>

 </svg>

Jsfiddle：http://jsfiddle.net/MxHPq/145/

Answer 1

这是因为您正在绘制的矩形位于嵌套的SVG视口之外。

SVG的宽度和高度为100x50，并且您在（-50,0）处绘制一个20x10的矩形。这意味着矩形覆盖了从（-50,0）到（-30,10）的区域。所以它不可见。默认情况下，嵌套SVG视口外的对象不可见。

有两种方法可以解决这个问题：

使视口外的对象可见。您可以通过在嵌套SVG上设置overflow="visible"来完成此操作。

<svg data="BusinessRoleFigure" x="144" y="95" width="128" height="66" id="outer">
  <rect x="0" y="0" width="100%" height="100%" stroke="rgb(178,178,126)" stroke-width="1" fill="rgb(255,255,181)"></rect>
  <svg id="nestedsvg" x="100%" height="100" width="50" overflow="visible">
    <rect x="-50" rx="5" ry="5" width="20" height="10" stroke="black" stroke-width="1" fill="black"></rect>
  </svg>
  <circle cx="118" cy="13" r="5" fill="none" stroke-linejoin="round" stroke="black" stroke-width="1"></circle>
</svg>

在SVG视口内移动矩形并重新定位SVG，使矩形最终位于同一位置。

我不知道您为什么希望嵌套的SVG位于x="100%"，但如果您使用此解决方案，则需要更改它。

<svg data="BusinessRoleFigure" width="128" height="66" id="outer">
  <rect x="0" y="0" width="100%" height="100%" stroke="rgb(178,178,126)" stroke-width="1" fill="rgb(255,255,181)"></rect>
  <svg id="nestedsvg" x="78" height="100" width="50">
    <rect x="0" rx="5" ry="5" width="20" height="10" stroke="black" stroke-width="1" fill="black"></rect>
  </svg>
  <circle cx="118" cy="13" r="5" fill="none" stroke-linejoin="round" stroke="black" stroke-width="1"></circle>
</svg>

关于原始SVG的一些其他说明：

x

y和<svg>坐标无效。
z-index目前在SVG中没有任何意义。虽然这可能会改变即将推出的SVG2标准。
position: relative在SVG中没有任何意义。

我已从修改过的示例中删除了这些内容。

SVG元素在屏幕上不可见，可以看到在控制台中添加的元素

1 个答案: