Question

我有一个简单的SVG

<symbol id="triangle" class="triangle" viewBox="0 0 100 100" preserveAspectRatio="none">
  <polygon points="0,100 50,0 100,100" stroke="none" />
</symbol>

<symbol id="rect" viewBox="0 0 100 100" preserveAspectRatio="none">
  <rect width='100' height='100' stroke="none"/>
</symbol>

<use xlink:href="#rect" width="100" height="80" y="30" fill="#000"/>
<use xlink:href="#triangle" width="20" height="20" y="10" fill="#000"/>

它显示了两个连接的边界：https://imgur.com/a/pLK8QqN。想知道如何摆脱它。

Answer 1

由于抗锯齿，有时您会得到1px的边框伪像。这将取决于形状中的坐标以及SVG和SVG元素的缩放比例。

如果您无法忍受，则需要将它们稍微重叠一点。或者在它们后面放置一个单独的元素以隐藏联接。

<svg width="333" y="333" viewBox="0 0 120 120">

  <symbol id="triangle" class="triangle" viewBox="0 0 100 100" preserveAspectRatio="none">
    <polygon points="0,100 50,0 100,100" stroke="none" />
  </symbol>

  <symbol id="rect" viewBox="0 0 100 100" preserveAspectRatio="none">
    <rect width='100' height='100' stroke="none"/>
  </symbol>

  <use xlink:href="#rect" width="100" height="80" y="30" fill="#000"/>
  <use xlink:href="#triangle" width="20" height="20" y="10" fill="#000"/>

</svg>


<!-- A 1px high rectangle added to bottom of triangle. Also need to add overflow visible because it is outside the symbols viewBox. -->
<svg width="333" y="333" viewBox="0 0 120 120">

  <symbol id="triangle2" class="triangle" viewBox="0 0 100 100" preserveAspectRatio="none" overflow="visible">
    <polygon points="0,100 50,0 100,100 100,101, 0,101" stroke="none" />
  </symbol>

  <symbol id="rect2" viewBox="0 0 100 100" preserveAspectRatio="none">
    <rect width='100' height='100' stroke="none"/>
  </symbol>

  <use xlink:href="#rect2" width="100" height="80" y="30" fill="#000"/>
  <use xlink:href="#triangle2" width="20" height="20" y="10" fill="#000"/>

</svg>

还有其他解决方案，例如：

在形状上添加细线。
使用<filter>稍微扩张形状

如何删除两个SVG符号连接的边界

1 个答案: