Question

在<use>标记内使用时，Webkit会忽略ForeignObject接缝。

代码：

<body>
    <svg id="my-svg" width="140" height="70" style="width: 140px; height: 70px;">
        <g x="10" y="10" width="80" height="60">
            <svg x="10" y="10" width="80" height="60">
                <rect width="80" height="70" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
            </svg>
        </g>
        <g x="55" y="35" width="85" height="17">
            <foreignObject width="85" height="17" x="55" y="35">
                <p xmlns="http://www.w3.org/1999/xhtml" style="margin: 0;">Lorem</p>
            </foreignObject>
        </g>
    </svg>

    <svg pointer-events="none" x="15" y="10" width="141" height="71">
        <use xlink:href="#my-svg"></use>
    </svg>
</body>

Chrome / Safari / Opera中的结果： enter image description here

Firefox中的结果 enter image description here

我的代码是否正确？有没有解决办法？

Answer 1

它成为Webkit中的一个错误，现在它还没有被修复......

https://bugs.webkit.org/show_bug.cgi?id=91515

Webkit在use标记中忽略ForeignObject

1 个答案: