html - SVG 路径不显示相同的不同浏览器

Question

我正在尝试创建一个带有形状箭头的 SVG 按钮，我在这里使用我的代码路径，有人建议我解决这个问题

<svg height="100" width="300">
  <a href="#"><path id="lineAB" d="M0 1 l 280 0 l50 50 l-50 50 l-280 0 z" stroke="gray" stroke-width="2" fill="red" /></a>
</svg>

这是我的截图:

Answer 1

我向您的 svg 添加了一个 css 边框，它显示了以下内容:

<svg height="100" width="300" style="border: 1px solid black;">
  <a href="#"><path id="lineAB" d="M0 1 l 280 0 l50 50 l-50 50 l-280 0 z" stroke="gray" stroke-width="2" fill="red" /></a>
</svg>

由于 svg 容器不够大，箭头的尖端被切断了。那是因为 280 + 50 是 330 而您将 svg 的大小限制为 300。

修复方法是将按钮大小减小到 300 或增加 svg 容器大小:

小按钮:

<svg height="100" width="300" style="border: 1px solid black;">
  <a href="#"><path id="lineAB" d="M0 1 l 250 0 l50 50 l-50 50 l-250 0 z" stroke="gray" stroke-width="2" fill="red" /></a>
</svg>

更大的容器:

<svg height="100" width="330" style="border: 1px solid black;">
  <a href="#"><path id="lineAB" d="M0 1 l 280 0 l50 50 l-50 50 l-280 0 z" stroke="gray" stroke-width="2" fill="red" /></a>
</svg>

不要问我 IE 是怎么回事。我猜它有不同的溢出默认值，随着内容增加元素宽度或通过减小其大小使 svg 适合容器。

更新:

我用 IE 测试过这个。看起来是溢出了:)。当我减小按钮宽度时，IE 测试也显示出一个小故障:我忘记将长度线向左减小 (l-280 0)。我更新了代码段。