SVG <image>元素的呈现质量

Question

SVG <image>元素的呈现质量

8

我有一个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>

结果：

这是一个关于IT技术的截图，无法提供更多信息。

- Noldor

你的示例涉及到一个相对链接的图像 - 你能把这个图像放在可以访问的地方吗？或者使用类似 http://duri.me/ 的方式将其内联？ - CupawnTae

@CupawnTae 我已经编辑了样本。 - Noldor

1

我发现一个纠正错误的方法是：不要使用width属性来拉伸图像使其居中，而是可以像下面这样更改x属性：x="600px" y="14" width="66px" height="66px"。这并不是一个答案。 - bprasanna

2

听起来像是一个 CSS 的 bug：在 FF41&43 上，当 image-rendering 被设置为 optimizequality 时，实际上使用的是 crisp-edges 算法，<image> 元素似乎根本不受这个 CSS 规则的影响：fiddle。 - Kaiido

@Kaiido 我认为svg <image>元素上的“image-rendering”属性和css属性中的“image-rendering”是两个不同的东西。这里有一个关于svg的参考链接，它说它只能应用于<image>元素。而在这个链接中的css参考中，它说使用的值曾经与svg参考相同，但后来更改了新的值... - Noldor

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bprasanna · Accepted Answer

由于Firefox和IE的渲染问题，我考虑尝试一种解决方法。

我尝试使用HTML的<img>标签代替SVG的<image>元素，并使用SVG的<foreignObject>元素嵌入它。

不再使用：

<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的工作示例