Question

我已尝试过所有内容，但我无法使用内联样式背景svg与Firefox一起使用，这适用于Chrome但不适用于Firefox。

<div style="display:flex;align-items: center;justify-content:space-between;height:100%;padding:1.25em;background-repeat: no-repeat;background-size: 100%;background-image: 
        url('data:image/svg+xml;utf8,<svg version=&quot;1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;1024&quot; height=&quot;79&quot;><defs><path id=&quot;a&quot; d=&quot;M0 0h1024v79H0z&quot;/></defs><clipPath id=&quot;b&quot;><use xlink:href=&quot;#a&quot; overflow=&quot;visible&quot;/></clipPath><linearGradient id=&quot;c&quot; gradientUnits=&quot;userSpaceOnUse&quot; x1=&quot;-4&quot; y1=&quot;35&quot; x2=&quot;1024&quot; y2=&quot;35&quot;><stop offset=&quot;0&quot; stop-color=&quot;#2377b8&quot;/><stop offset=&quot;1&quot; stop-color=&quot;#2e378e&quot;/></linearGradient><path clip-path=&quot;url(#b)&quot; fill=&quot;url(#c)&quot; d=&quot;M-4-9h1028v88H-4z&quot;/></svg>');">
<div style="display:flex;align-items:center;">
	<h1 style="margin:0;color:white;font-weight:bold;font-size:1.8em;line-height:1;">
    Title
    </h1>
    <h2 style="font-size:1.2em;line-height:1.5;color:white">
    &nbsp;| Dashboard
    </h2>
</div>
<div style="display:flex;align-items:center;">
	<h1 style="margin:0;color:white;font-weight:bold;font-size:1.8em;line-height:1;margin-right:15px;">Location</h1>
    <svg version="1" xmlns="http://www.w3.org/2000/svg" width="44" height="44"><circle cx="22" cy="22" r="22" fill="#fff"/>
        <circle cx="22" cy="22" r="19" fill="#0b694f"/><circle cx="23" cy="22" r="9" fill="#f02e46"/></svg>
</div>
</div>

我在线查看了所有内容，但没有任何工作 -

提前致谢。

Answer 1

您不能将＃字符作为路径的一部分放在URL中，因为它被保留为fragment identifier的开头。我把它编码为下面的％23。

supportedInterfaceOrientations

内联SVG无法在Firefox Quantum中运行

1 个答案: