SVG <rect> 填充在 Chrome 而非 Safari 中有效

Question

谁能告诉我这段 SVG 有什么问题？它似乎适用于 Chrome（矩形为蓝色），但我无法让它出现在 Safari 或 Edge 中。我想我构建的元素有误？

<svg width="491" height="473">
    <g class="place-label">
        <rect class="place-label-background" style="width: 92.48px; height: 18px; fill: blue" x="367.757" y="136.259" />
    </g>
</svg>

Answer 1

如果你想让它在 Safari 中工作，你需要使用 width/height 的属性。

目前只有 Blink（即 Chrome/Opera）支持 width/height 作为样式，这是 SVG 2 规范的新功能。

SVG <rect> 填充在 Chrome 而非 Safari 中有效

SVG <rect> fill works in Chrome not Safari

svg

webkit