Question

我使用的是Google Chrome 46.0.2490.80

问题是浏览器无法在svg数据uri中显示createObjectURL编码的图像模式。

这是jsbin：https://jsbin.com/petulu/edit?html,output

<body>
    Choose an image to fill<input id="f-input" type="file" accept="image/*" onchange="loadFile(event)">
    <br/>The svg image:
    <br/>
    <div id='isvg'>
        <svg version="1.1" width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <defs>
                <pattern id="pat1" patternUnits="objectBoundingBox" width="1" height="1" viewBox="0 0 1 1" preserveAspectRatio="none">
                    <image id="patImg" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="" width="1" height="1" preserveAspectRatio="none"></image>
                </pattern>
                <pattern id="pat2" overflow="visible" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10" viewBox="0 0 10 10">
                    <line fill="none" stroke="#000000" stroke-width="0.5" x1="-5" y1="-5" x2="15" y2="15" />
                </pattern>
            </defs>
            <g>
                <path fill="url(#pat1)" stroke="#000000" d="M10,10l0,60l60,0z" />
                <path fill="url(#pat2)" stroke="#000000" d="M110,110l0,70l70,0z" />
            </g>
        </svg>
    </div>
    <br/>
    <br/>The svg image after base64 encode:
    <br/>
    <div>
        <img id="svgb64" />
    </div>
    <script>
        var loadFile = function (event) {
            var URLObj = window.URL || window.webkitURL;
            var patImg = document.getElementById('patImg');
            var imgObjURL = URLObj.createObjectURL(event.target.files[0]);
            patImg.setAttribute('xlink:href', imgObjURL);

            var isvg = document.getElementById('isvg');
            var html = isvg.innerHTML;
            console.log(html);
            var svgb64 = document.getElementById('svgb64');
            svgb64.src = 'data:image/svg+xml;base64,' + btoa(html);
        };
    </script>
</body>

在Firefox浏览器（版本42.0）中，选择图像后，我正确地得到了以下内容：

在谷歌浏览器中，选择相同的图像后，我得到以下内容：

在SVG进行base64编码后，Google Chrome中的图像模式（cat）丢失了！

我认为Android webView有同样的问题。我怎么能克服这个？我的意思是，如何让Chrome在svg数据uri中正确显示图像模式。

以下是我用于测试的图像：

Chrome无法在svg数据中显示createObjectURL编码的图像模式uri

0 个答案: