SVG：xlink:href 加载的图像在 safari 中不起作用答案

【问题标题】：SVG : xlink:href loaded image not working in safariSVG：xlink:href 加载的图像在 safari 中不起作用
【发布时间】：2018-07-06 13:39:13
【问题描述】：

我已将 base64encodeed 图像加载到 'xlink:href' 属性，用于 #patternImage 图像标签。它在 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");
});

【问题讨论】：

请再给我们看几行您的“HTML”。你如何使用<image>？作为<pattern> 的一部分？另外，您加载的图像是什么 mimetype？如果是 SVG，也请以未编码的形式显示。
@ccprog <image> 是<pattern> 的一部分
哪个版本的 Safari？在 11.1.1 jsfiddle.net/2q93wu15/1 上为我工作此外，我正在加入 @ccprog 请求 minimal reproducible example。我们需要知道设置的图像是什么，d 的实际路径是什么。
@ Kaiido其还11.1.1和路径d ID动态像“d =“M 0,0大号252144 612144 612180 648180 648216 684216 684252 720252 720612 684612 684648 648648 648684 612684 612720 252720 252684 216684 216,648 180,648 180,612 144,612 144,252 180,252 180,216 216,216 216,180 252,180 252,144 0,0 L 0,0 0,864 864,864 864,0 0,0"
我们需要知道设置的图像是什么。即使有这个d 属性it still works for me。你能确认它不适合你吗？

标签： javascript svg xlink

【解决方案1】：

谢谢Kaiido

解决方案是：

<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() {
    });
  });

【讨论】：

你考虑过使用 URL.createObjectURL(blob) 代替 base64 字符串吗？
不，我没有尝试过URL.createObjectURL(blob)
我可以推荐它
@Endless 谢谢推荐，下次会用。