SVG <image>元素渲染质量
Nol*_*dor 8 html css svg html-rendering image-quality
我有一个SVG画布,用户可以选择并调整其中的一些<image>元素.我使用preserveAspectRatio="xMidYMid meet"属性值来保持原始宽高比.原始图像源大多是256x256px大小.在Firefox和IE-11上,当我将<image>元素调整为比原始大小更小的尺寸时,它们看起来非常像素化.在Chrome上,它们看起来非常流畅.我想知道是否有任何css或svg功能可以帮助我让它们在Firefox和IE上看起来更流畅.
谢谢.
编辑:添加样品..
https://jsfiddle.net/p8km6nhc/7/
<svg viewBox="-170 -87 1678 869" style="width: 100%; height: 100%; overflow: hidden; left: 0px; top: -0.800003px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<filter id="varlikItemShadow1">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
<feOffset dy="1" dx="1"></feOffset>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g>
<g transform="matrix(1,0,0,1,0,0)">
<g transform="matrix(1,0,0,1,158,256)">
<g title="" data-original-title="" data-rounded="yes">
<text style="font:0px arial;" x="0" y="1" stroke="none" transform="matrix(1,0,0,1,0,0)" fill="#ffffff" fill-opacity="0.111111">[[VarlikId=3999]]</text>
<rect filter="url(#varlikItemShadow1" stroke="#2b5987" stroke-width="2" fill-opacity="0.9" fill="#ffe8f6" ry="10" rx="10" y="0" x="0" height="140" width="1270"></rect>
<path d="M0 0 L 1268 0 1268 138 0 138Z" stroke="none" stroke-width="0" fill="none" fill-opacity="0" transform="matrix(1,0,0,1,0,0)"></path>
<image image-rendering="optimizeQuality" preserveAspectRatio="xMidYMid meet" x="14" y="14" width="1242px" height="66px" xlink:href="https://deviantshare.azurewebsites.net/img/test.png"></image>
<text style="font:32px arial;" x="0" y="30" stroke="none" transform="matrix(1,0,0,1,591,94)" fill="#2b5987">3. Kat</text>
</g>
</g>
</g>
</g>
</svg>
结果:
由于它显然看起来像是 Firefox 和 IE 渲染的问题，因此考虑尝试一种解决方法来解决这个问题。
没有使用<image>SVG 元素，而是尝试使用<img>HTML 标签并使用<foreignObject>SVG 元素嵌入它。
代替 ：
<image image-rendering="optimizeQuality" preserveAspectRatio="xMidYMid meet"
x="14" y="14" width="1242px" height="66px"
xlink:href="https://deviantshare.azurewebsites.net/img/test.png"></image>
用过的：
<foreignObject x="600" y="14" width="100" height="100">
<body>
<img src="https://deviantshare.azurewebsites.net/img/test.png"
type="image/svg+xml" width="66px" height="66px">
</body>
</foreignObject>
但有一个悬而未决的问题是IE 还不支持foreignObject！
Codepen.io 工作示例