小编Nol*_*dor的帖子

SVG <image>元素渲染质量

我有一个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 …
Run Code Online (Sandbox Code Playgroud)

html css svg html-rendering image-quality

8
推荐指数
1
解决办法
2644
查看次数

为什么选择选项更改事件不能有这个和 event.target 来获取选定的值?

在选择选项更改事件中,为什么我们不能通过获取 this 或 event.target 来获取所选值,而不是编写像$( "select option:selected" )获取所选值这样的笨拙代码?

javascript jquery

4
推荐指数
2
解决办法
1万
查看次数

标签 统计

css ×1

html ×1

html-rendering ×1

image-quality ×1

javascript ×1

jquery ×1

svg ×1