Question

我制作了这个SVG，现在我试图让它覆盖按钮，我该怎么做？

正如您在代码中看到的那样，它悬挂在按钮上，如何让它覆盖按钮？

代码：

SVG：

<svg width="266" height="266" viewBox="0 0 266 266">
  <line x1="264" y1="1" x2="0" y2="1" style="stroke: #0059dd; stroke-width: 3;" />
  <line x1="265" y1="265" x2="265" y2="0" style="stroke: #0059dd;stroke-width: 3; " />
  <line x1="100%" y1="265" x2="0" y2="265" style="stroke: #0059dd ; stroke-width: 3;" />
  <line x1="1" y1="100%" x2="1" y2="0" style="stroke:#0059dd;stroke-width: 3; " />
  <line x1="0" y1="0" x2="100%" y2="100%" style="stroke:#0059dd; stroke-width:3" />
  <line x1="0" y1="100%" x2="100%" y2="0" style="stroke:#0059dd; stroke-width:3" />
</svg>

Answer 1

用户代理样式表可能具有（并且在Chrome的情况下肯定有）按钮内的填充。如果将padding:0添加到按钮的样式中，则SVG会正确匹配。

编辑：根据浏览器的不同，您可能仍会看到SVG不太合适。如果是这样，那是因为按钮的“266px”大小包括按钮的边框。如果您希望SVG完全适合按钮，您可以将box-sizing更改为content-box，如下面的JSfiddle所示，但请记住，这意味着您的按钮会比266px略大。或者，您可以将border-width设置为0（或border至none）以完全消除边框，此时按钮将精确地为266像素。

JSfiddle

试图让这个SVG覆盖按钮？

1 个答案: