Firefox为什么不显示我的SVG图标,以及如何显示? [英] Why doesn't Firefox show my SVG icons, and how to do it?
问题描述
上下文
我仅使用HTML,CSS和JS(出于学习目的)创建静态网站.我成功实现了两个主题.为了更改它,我在 button
元素中添加了 SVG
图标.然后,svg根据主题(月亮或太阳)而变化.
Context
I am creating a static website using HTML, CSS and JS only (for learning purposes). I successfully implemented two themes. In order to change it, I added an SVG
icon in a button
element. The svg then changes according to the theme (moon or sun).
问题
尽管一切在Chrome浏览器中都能正常运行,但使用Firefox根本无法显示SVG,但是按钮可以正常工作.我怀疑这来自我使用CSS变量在 hover
上更改SVG的 path
的方式.但是,在我的情况下,使用变量确实是目标.
Problem
While everything runs well in a chromium browser, the SVGs don't show at all using Firefox, but the buttons work as expected. I suspect this comes from the way I use CSS variables to change the path
of the SVG on hover
. However, using variables is quite the goal in my case.
输出
这是我在基于铬的浏览器中得到的(预期)结果:
Outputs
Here is the (expected) result I get in the chromium based browser:
这是我在Firefox中获得的版本:
Here is the one I get in Firefox:
问题
如何使用CSS变量使SVG出现在Firefox中?
Question
How can I make the SVGs appear in Firefox using CSS variables ?
MWE
这是一个例子.如您所见,在Firefox中,除非将路径设置为第三个svg图标中的内联,否则将不会显示任何内容.
MWE
Here is an example. As you can see, in Firefox and unless the path is set inline as in the third svg icon, there is just nothing showing.
:root {
--square: "M 0 0 H 50 V 50 H 0 Z";
--triangle: "M 0 0 V 50 H 50 Z";
--color1: red;
--color2: green;
--color3: blue;
}
/*Doesn't work in FF*/
#path1 {
d: path(var(--square));
}
/*Doesn't work in FF either*/
#path2 {
d: path("M 25 0 L 50 25 L 25 50 L 0 25 Z");
}
/*Behaviour when hovered*/
#btn1:hover path {
d: path(var(--triangle));
fill: var(--color1);
}
#btn2:hover path {
d: path(var(--triangle));
fill: var(--color2);
}
#btn3:hover path {
d: path(var(--triangle));
fill: var(--color3);
}
/*Some more (off-topic) styling*/
button:hover {
cursor: pointer;
}
svg {
width: 25;
height: 25;
max-width: 50px;
max-height: 50px;
}
<button id="btn1">
<svg>
<path id="path1" />
</svg>
</button>
<button id="btn2">
<svg>
<path id="path2" />
</svg>
</button>
<button id="btn3">
<svg>
<path id="path3" d="M 0 0 H 50 V 50 Z";/>
</svg>
</button>
推荐答案
因为 d 是属性,而不是CSS属性.作为实验性实现,它正在铬浏览器中运行.但是它经过讨论然后被拒绝.
Because d is an attribute, not a CSS property. It is working in chromium browsers, as an experimental implementation. But it was discussed and then rejected.
https://github.com/w3c/svgwg/issues/49
https://github.com/w3c/svgwg/issues/119
如何使用CSS变量使SVG出现在Firefox中"?
"How can I make the SVGs appear in Firefox using CSS variable" ?
将整个SVG分配为CSS变量,然后将其作为背景".或背景图像".您可以通过在base64中进行编码来保存整个SVG(不好的做法),或者对SVG使用URL编码器像这样一个.
Assign the whole SVG as a CSS variable and put it as a "background" or "background-image". You can save the whole SVG by encoding in base64 (bad practice) or use an URL encoder for SVG like this one.
.bg {
background: url(var(--yourCSSVar)); // or background-image even better
}
操作方法:
SVG代码(原始):
SVG code (original):
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FF00FF;}
</style>
<g>
<rect x="3" y="3" class="st0" width="4" height="4"/>
<path d="M6.5,3.5v3h-3v-3H6.5 M7.5,2.5h-5v5h5V2.5L7.5,2.5z"/>
</g>
</svg>
复制您的SVG代码和Google,以获取SVG的URL编码器或base64编码器( URL编码器的示例,
Copy your SVG code and google for a URL encoder for SVGs or a base64 encoder (an example of URL encoder, an example of base64 encoder). Copy the output and you should have a string that looks like this one:
"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;'
xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FF00FF;%7D%0A%3C/style%3E%3Cg%3E%3Crect x='3' y='3'
class='st0' width='4' height='4'/%3E%3Cpath d='M6.5,3.5v3h-3v-3H6.5
M7.5,2.5h-5v5h5V2.5L7.5,2.5z'/%3E%3C/g%3E%3C/svg%3E%0A"
现在,我将创建一个代码段并使用该字符串.
Now, I will create a code snippet and use that string.
:root {
--encodedSVG: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FF00FF;%7D%0A%3C/style%3E%3Cg%3E%3Crect x='3' y='3' class='st0' width='4' height='4'/%3E%3Cpath d='M6.5,3.5v3h-3v-3H6.5 M7.5,2.5h-5v5h5V2.5L7.5,2.5z'/%3E%3C/g%3E%3C/svg%3E%0A");
--svgOnHover: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FF00FF;%7D%0A%3C/style%3E%3Cg%3E%3Cpolygon class='st0' points='3.95,6.08 1.54,5.71 3.28,3.92 2.88,1.44 5,2.61 7.12,1.44 6.72,3.92 8.46,5.71 6.05,6.08 5,8.32 '/%3E%3Cpath d='M6.46,2.37L6.26,3.6l-0.08,0.5l0.35,0.36l0.89,0.91L6.24,5.55L5.71,5.63L5.49,6.11L5,7.15L4.51,6.11L4.29,5.63L3.76,5.55 L2.57,5.37l0.89-0.91l0.35-0.36L3.74,3.6l-0.2-1.22l0.98,0.54L5,3.18l0.48-0.27L6.46,2.37 M7.78,0.5L5,2.04L2.22,0.5l0.53,3.26 L0.5,6.06l3.11,0.48L5,9.5l1.39-2.96L9.5,6.06L7.25,3.76L7.78,0.5L7.78,0.5z'/%3E%3C/g%3E%3C/svg%3E%0A");
}
h1 {
text-align: center;
}
.svg-background {
height: 100%;
min-height: 200px;
width: 30%;
margin: 0 auto;
outline: 2px solid;
background-image: var(--encodedSVG);
background-repeat: no-repeat;
}
.svg-background:hover {
background-image: var(--svgOnHover);
}
<h1> Example </h1>
<div class="svg-background"></div>
这篇关于Firefox为什么不显示我的SVG图标,以及如何显示?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!