SVG：xlink：href加载的图像在野生动物园中不起作用

Question

我已将base64编码的图像加载到#patternImage图像标签的'xlink:href'属性中。 它可以在Chrome和Firefox中正常工作，但不能在Safari中工作。

HTML：

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" id='svgId' width="576" height="720" style="outline:auto;" >
    <defs>
        <pattern id="imgpattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
            <image id="patternImage" xlink:href="" width="20" height="20"></image>
        </pattern>
    </defs>
    <path id="svgpath" stroke="#f000" fill="#ff0000" stroke-width="0.25px" style="fill:url(#imgpattern) !important"></path>
</svg>

JS：

$("#patternImage").attr("xlink:href",encodedImage);
$("#patternImage").load(function(){
    console.log("Loaded");
});

Answer 1

谢谢海道

解决方案是：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id='svgId' width="576" height="720" style="outline:auto;">
        <defs>
            <pattern id="imgpattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                <image id="patternImage" xlink:href="" width="20" height="20"></image>
            </pattern>
        </defs>
        <path id="svgpath" stroke="#f000" fill="#ff0000" stroke-width="0.25px" style="fill:url(#imgpattern)" d="M0,0H576V720H0z"></path>
</svg>

Javascript：

fetch("https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg").then(r => r.blob())
  .then(b => new Promise(res => {
    const f = new FileReader();
    f.onload = e => res(f.result);
    f.readAsDataURL(b);
  }))
  .then(encodedImage => {
    $("#patternImage").attr("xlink:href", encodedImage);
    $("#patternImage").load(function() {
    });
  });