css - 如何使用 CSS 直观地识别 SVG 的 View 框？

Question

我愿意目视识别 viewbox SVG，以避免任何元素脱离它。

这是我认为在 CSS 中最直观的方式(jsfiddle):

polygon{
    stroke:red;
    stroke-width:20px;
}

svg{
    stroke:blue;
    stroke-width:20px;
}

我期待 <svg> 的相同行为比任何其他元素；即我希望在我的 <svg> 周围有一个 20px 宽的蓝色描边。元素，就像我的 <polygon> 一样元素，但我的期望显然过于乐观。

我想要与 CSS 直接交互——即，无需以编程方式创建 <rect>具有 viewbox 坐标和位置的元素.

感谢您的帮助。

Answer 1

对于根 svg，您可以简单地使用常规 CSS 样式，而不是 stroke 等:

Demo Fiddle

改变

svg{
    stroke:blue;
    stroke-width:20px;
}

到

svg{
    border:20px solid blue;
}