我有一个网页,其中包含HTML中此代码的许多实例:
<span class="change-slide">@</span>
然后,该页面使用Javascript将替换为@
SVG图片:
var changes = document.getElementsByClassName('change-slide');
for (var i=0; i<changes.length; i++) {
changes[i].innerHTML = '<svg version="1.1" viewBox="0 0 16 16" height="16" width="16"><g transform="translate(0,-1036.3622)" id="layer1"><rect y="1036.8221" x="0.45993891" height="8.080122" width="15.080122" id="screen" style="fill:#ffffff;stroke:#000000;stroke-width:0.91987783;" /><g id="arrow-group"><path id="arrow" style="stroke-width:0" d="m 12.812155,1049.1511 -2.523251,2.5233 -0.7704589,-0.7705 1.4959739,-1.496 -2.3691601,0 0,-1.0915 2.3691601,0 -1.4959739,-1.4959 0.7704589,-0.7705 2.523251,2.5233 0,0.5778 z m -6.8956031,-0.8347 1.6372242,0 0,1.0915 -1.6372242,0 0,-1.0915 z m -1.0914828,0 0,1.0915 -1.6372242,0 0,-1.0915 1.6372242,0 z" /></g></g></svg>';
}
以下是相关的CSS:
.change-slide{font-weight:bold}
.change-slide svg{width:20px;height:20px;display:inline-block;vertical-align:middle}
@media screen{
.change-slide svg path{fill:#900;stroke:#900}
.change-slide svg rect{fill:#e2e2f8 !important;stroke:#4c0099 !important}
}
我估计在该特定页面上将进行大约50个左右的替换(一个口述脚本,指示何时更换幻灯片)。在Firefox和Edge中同时打印页面时,SVG图标将按预期显示。但是,在Chrome中,尽管屏幕视图正确,但大多数图标都不会打印(并且不会在打印预览中显示)。这是一个屏幕截图,带有图标和几个缺少的图标突出显示:
任何想法可能有什么问题吗?
一种可能是Chrome不能正确解决SVG中的转换问题。我将转换应用于后代元素,因此它看起来与SVG相同,但不包含变形:
<svg version="1.1" viewBox="0 0 16 16" height="16" width="16">
<g id="layer1">
<rect y="0" x="0.45993891" height="8.080122" width="15.080122" id="screen" style="fill:#ffffff;stroke:#000000;stroke-width:0.91987783;" /><g id="arrow-group">
<path id="arrow" style="stroke-width:0" d="m 12.812155,12.7889 -2.523251,2.5233 -0.7704589,-0.7705 1.4959739,-1.496 -2.3691601,0 0,-1.0915 2.3691601,0 -1.4959739,-1.4959 0.7704589,-0.7705 2.523251,2.5233 0,0.5778 z m -6.8956031,-0.8347 1.6372242,0 0,1.0915 -1.6372242,0 0,-1.0915 z m -1.0914828,0 0,1.0915 -1.6372242,0 0,-1.0915 1.6372242,0 z" />
</g>
</g>
</svg>
也许用这种帮助取代您的svg。
编辑:这是一个较小的修改版本,可能会解决Firefox上的新问题:
<svg version="1.1" viewBox="0 0 16 16" height="16" width="16">
<g id="layer1">
<rect y="0" x="0.5" height="8" width="15" id="screen" style="fill:#ffffff;stroke:#000000;stroke-width:1;" />
<g id="arrow-group">
<path id="arrow" style="stroke-width:0" d="m 12.812155,12.7889 -2.523251,2.5233 -0.7704589,-0.7705 1.4959739,-1.496 -2.3691601,0 0,-1.0915 2.3691601,0 -1.4959739,-1.4959 0.7704589,-0.7705 2.523251,2.5233 0,0.5778 z m -6.8956031,-0.8347 1.6372242,0 0,1.0915 -1.6372242,0 0,-1.0915 z m -1.0914828,0 0,1.0915 -1.6372242,0 0,-1.0915 1.6372242,0 z" />
</g>
</g>
</svg>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句