Question

在Firefox和Chrome中显示有所不同。正如我调查的那样，Chrome在显示图像和Firefox时不考虑css。

HTML

<svg viewBox="-80 0 500 500">
<g>
<g class="node" transform="translate(0,20)" style="opacity: 1;">
<text transform="translate(0,0)"><tspan class="message">Visible in Chrome and Firefox</tspan></text>
<image class="icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://cdn3.iconfinder.com/data/icons/diagram_v2/PNG/32x32/diagram_v2-17.png" x="0" y="15" width ="20px" height="20px" ><title>Try to use in Firefox and Chrome.</title> 
</image>
</g>
<g class="node" transform="translate(0,80)" style="opacity: 1;">
<text transform="translate(0,0)"><tspan class="message">Invisible in Firefox</tspan></text>
<image class="icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://cdn3.iconfinder.com/data/icons/diagram_v2/PNG/32x32/diagram_v2-17.png" x="0" y="15" ><title>Try to use in Firefox and Chrome.</title> 
</image>
</g>
</g>
</svg>

CSS

.icon {
  display: block;
  margin: 0 auto;
  width: 20px;
  height: 20px;
}
.message {
  text-align: left;
  visibility: visible;
  font: 8pt sans-serif;
}

这是jsfiddle。如何推动Firefox使用css？

PS：我找到了相关的question，但我在根元素中有了viewBox。

Answer 1

在SVG 1.1（当前标准）中，只能使用CSS设置properties样式。

在即将推出的SVG 2标准中，几乎每个属性都可以使用CSS进行样式化。但是，浏览器才刚刚开始实现此更改。 Chrome比Firefox更进一步实现这一目标。

现在，你必须以不同的方式做到这一点。 IE浏览器。属性width="20" height="20"。

由于使用样式，在FireFox中标记svg中的图像是不可见的。怎么修？

1 个答案: