Question

我在这里遇到一些奇怪的问题。我正在开发一个应用程序，我必须加载svg然后将其转换为base64以设置img标记的源。我必须这样做，所以我可以修改svg然后再转换它并显示在img标签中。我在这里遇到的问题有时我必须将模式填充应用于转换为base64时不会呈现的svg字符串。如果我使用innerhtml将svg字符串放在div标签中，我可以看到应用了它的模式。我有点迷失在这里。这是一个已知问题还是我做错了什么。这是我使用的代码。

一段代码

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=11" />
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title></title>
    </head>
    
    
    <body style="margin:0">
    
    </body>
    
    <script language="javascript">
        let svg =
            `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:2048px;height:2048px"
        width="2048px" height="2048px" x="0px" y="0px" preserveAspectRatio="none" version="1.1" viewBox="0 0 2048 2048">
            <g id="rect" fill="#FF0000">
                <rect width="2048" height="2048" x="0" y="0"/>
            </g>
            <defs>
                <pattern id="RFLS2MGRY1" patternUnits="userSpaceOnUse" width="409" height="455" >    
                <image id="Medium Grey"  xlink:href="https://picsum.photos/200/300" x="0" y="0" width="409" height="455" />
                </pattern>    
            </defs>
        </svg>`
    
        let svgImage = new Image();
        document.body.appendChild(svgImage);
        const updateInternal = () => {
            svgImage.setAttribute("src", "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(
                XMLToString(svgData)))));
        }
        const applyPattern = (clip) => {
            let $clip = svgData.documentElement.querySelectorAll(`[id=rect]`)
            console.log($clip[0])
            let css = `url(#RFLS2MGRY1)`;
            $clip[0].style.fill = css;
            updateInternal();
        }
        const applyColor = (clip) => {
            let $clip = svgData.documentElement.querySelectorAll(`[id=rect]`)
            console.log($clip[0])
            let css = `#FFFF00`;
            $clip[0].style.fill = css;
            updateInternal();
        }
        const XMLToString = (oXML) => {
            //code for IE
            if (window.ActiveXObject) {
                var oString = oXML.xml;
                return oString;
            }
            // code for Chrome, Safari, Firefox, Opera, etc.
            else {
                return (new XMLSerializer()).serializeToString(oXML);
            }
        }
        var parser = new DOMParser();
        svgData = parser.parseFromString(svg, "image/svg+xml");
        updateInternal();
        setTimeout(applyColor, 1000);
        setTimeout(applyPattern, 3000);
    </script>
    </html>

正如您所看到的那样，无论模式图像是在应用它之前加载还是从我的服务器提供服务，都会应用更改颜色而不是模式。

Base64 SVG字符串不呈现模式

0 个答案: