Question

我有内联SVG显示一个简单的圆圈，按预期工作：

WHERE active=1

如果我通过XLink包含圆圈，则相同的代码会有所不同：

<svg width="200" height="200" viewBox="-25 -25 50 50" >
    <circle cx="0" cy="0" r="15" />
</svg>

以下是一个示例：Fiddle

为什么这两个例子的呈现方式不同？

感谢。

Answer 1

只需将overflow="visible"添加到您的符号

即可

基于Robert Longson评论的精致答案：

更好的方法是将符号内的圆圈移动到一个位置，使其位于视口内。

<svg style="display:none;">
  <symbol id="circle">
    <circle cx="25" cy="25" r="15" />
  </symbol>
</svg>

<svg width="200" height="200" viewBox="-25 -25 50 50">
  <use x="-25" y="-25" xlink:href="#circle" />
</svg>

<svg width="200" height="200" viewBox="-25 -25 50 50">
  <circle cx="0" cy="0" r="15" />
</svg>

SVG＆amp; XLink：Circle的渲染是不一致的？

1 个答案: