html – SVG元素渲染质量

发布时间：2020-12-14 16:41:57 所属栏目：资源来源：网络整理

导读：我有一个SVG画布,用户可以选择并调整一些 image里面的元素.我使用preserveAspectRatio =“xMidYMid meet”属性值来保持原始宽高比.原始图像源大多为256x256px大小.在Firefox和IE-11上,当我调整大小 image元素尺寸小于原始尺寸,看起来非常像素化.在Chrome上,

我有一个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,1,0)">
            <g transform="matrix(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)" fill="#ffffff" fill-opacity="0.222221">[[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)"></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,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 doesn’t support foreignObject呢！

Codepen.io正在运作example

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!