如何直观地识别带有 CSS 的 SVG 的视图框？

Question

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

这是我觉得在 CSS (jsfiddle) 中最直观的方法：

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

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

我期望 <svg> 元素的行为与其他元素相同；也就是说，我原本希望 <svg> 元素周围有一个 20px 宽的蓝色描边，就像我的 <polygon> 元素一样，但我的期望显然过于乐观了。

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

感谢您的帮助。

Answer 1

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

Demo Fiddle

改变

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

至

svg{
    border:20px solid blue;
}