我有一个SVG图像可以在chrome中呈现,但在Firefox中却没有。它抛出一个解析错误:
XML解析错误:未关闭的CDATA部分
第1行,第292行:
对我而言,cdata部分看起来很好。有什么想法吗?
data:image/svg+xml;utf8,<svg clip-rule="evenodd" height="48px" width="48px" fill-rule="evenodd" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 5000 5000" xmlns="http://www.w3.org/2000/svg"><defs><style type="text/css"><![CDATA[ .str0 {stroke:#434242;stroke-width:100} .fil2 {fill:#434242} .fil0 {fill:url(#id0)} .fil1 {fill:url(#id1)} ]]></style><linearGradient gradientUnits="userSpaceOnUse" id="id0" x1="2500" x2="2500" y1="900.02" y2="1950.02"><stop offset="0" stop-color="#FCFCFD"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="id1" x1="2499.86" x2="2499.86" y1="3835.02" y2="1715"><stop offset="0" stop-color="#84ff45"/><stop offset="1" stop-color="#84e45c"/></linearGradient></defs><g id="Layer_x0020_1"><path class="fil0 str0" d="M500 1950v-950c0-55 45-100 100-100h1400l400 300h2000c55 0 100 45 100 100v650h-4000z"/><path class="fil1 str0" d="M600 4100h3800c55 0 98-45 100-100l100-2450c2-55-45-100-100-100h-1500l-400 300h-2100c-55 0-102 45-100 100l100 2150c3 55 45 100 100 100z"/><path class="fil2" d="M800 1100h1100c55 0 100 45 100 100s-45 100-100 100h-1100c-55 0-100-45-100-100s45-100 100-100z"/></g></svg>
答案 0 :(得分:1)
问题不在于XML,而是在具有data:
URI方案的URI中使用它的方式。 URI中特殊的字符需要是%HH编码的; &#39;#&#39;之后的URI的一部分已被剥离并被视为片段标识符,将CDATA部分保留在URI的路径部分中。你需要编码&#39;#&#39;签署%23。