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 is 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）。我更新了代码段。