css 在移动的中查看时SVG的边缘模糊

cvxl0en2 于 2023-01-03 发布在其他

关注(0)|答案(2)|浏览(161)

我在我的网站上使用SVG而不是实际的emoji，以确保它在所有设备上看起来都一样。但是，当我在iPhone上查看时，SVG的边缘看起来模糊不清。（在桌面上不会发生这种情况。）
第一节第一节第一节第一节第一次
As you can see from the first image (✌️emoji svg), some parts of the SVG are blurry while others are crisp. In the second svg, (💭emoji) the edges are completely blurry. It is not the svg that is causing the blurriness, it appears completely crisp on desktop. This is how I am inserting the svg:

.emoji {
    background-position:center center;
    background-repeat:no-repeat;
    background-size:1em 1em;
    display:inline-block;
    height:1em;
    margin:0 .05em 0 .1em;
    vertical-align:-0.1em;
    width:1em
}
.emoji.victory-hand {
    background-image: url(../emojis/emoji/victory_hand_color_default.svg);
}
.emoji.thought-balloon {
    background-image: url(../emojis/emoji/thought_balloon_color.svg);
}

<h2>hello<i class="emoji victory-hand"></i></h2>
<h2>projects <i class="emoji thought-balloon"></i></h2>

当我使用svg查看器查看或使用电脑时，svg很好，只有在手机上看起来模糊。有人知道为什么会发生这种情况吗？

css

来源：https://stackoverflow.com/questions/74959067/edges-of-svg-appearing-blurry-when-viewed-in-mobile

2条答案

按热度按时间

lymnna711#

正如评论所说，iOS safari显然以固定的分辨率渲染屏蔽的图像。
所以放大的时候图像会变模糊。
这可能就是为什么OP的表情符号中的一些轮廓是清晰的，而另一些是模糊的/像素化的原因。

左：遮罩形状;右：剪裁形状

body {
  font-size: 5em;
  background: #000;
}

svg {
  height: 100%
}

.icon-wrap {
  height: 1em;
  display: inline-block;
}

<div class="icon-wrap">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
    <defs>
      <mask id="mask">
        <rect x="0" y="0" width="100%" height="100%" fill="#000"></rect>
        <path fill="#fff" d="M62.05 7.31c6.86 0 14.13 6.46 14.41 12.79c0.21 4.74-1.42 10.5-3 16.07c-1.98 6.98-3.68 13.01-2.02 17.42a3 3 0 0 0 2.81 1.94h0.11l7.2-0.25h0.06c7.33 0 13.3 5.96 13.31 13.3l0.05 42.21c0 2.5-0.97 4.86-2.74 6.63s-4.12 2.75-6.63 2.75h-0.08c-8.6-0.07-21.51-0.41-34.19-1.6c-8.6-0.81-17.48-2.09-24.11-5.85c-2.2-1.25-4.58-1.54-6.49-1.78c-0.76-0.09-1.47-0.18-2.03-0.32c-4.2-0.99-7.14-4.61-7.15-8.8l-0.08-32.75c-0.01-3.78 2.69-6.95 6.42-7.53c0.15-0.02 0.31-0.06 0.45-0.11c0.56-0.18 13.94-4.55 24.05-12.45c4.87-3.81 9.05-9.67 11.17-15.68s2.1-12.36 2.09-17.5c0-2.44-0.01-5.74 0.41-6.74a10.97 10.97 0 0 1 5.98-1.75"></path>
      </mask>
    </defs>
    <radialGradient id="a" cx="51.77" cy="31.401" r="87.039" gradientTransform="matrix(-.00218 1 -.7873 -.00172 76.604 -20.315)" gradientUnits="userSpaceOnUse">
      <stop offset=".6" stop-color="#FFCA28" />
      <stop offset="1" stop-color="#FFB300" />
    </radialGradient>
    <path mask="url(#mask)" fill="url(#a)" d="M85.52 121.67c-8.63-.07-21.58-.41-34.32-1.61-8.77-.83-17.83-2.14-24.71-6.04-1.94-1.1-4.06-1.37-5.94-1.6-.8-.1-1.55-.19-2.19-.34-4.88-1.15-8.29-5.37-8.31-10.26l-.07-32.75c-.01-4.53 3.22-8.32 7.69-9.02.08-.01.15-.03.23-.05.55-.18 13.69-4.46 23.59-12.2 4.66-3.64 8.65-9.25 10.68-15 2.02-5.73 2.01-11.98 2-17 0-3.24-.01-7.27.87-7.86 2.14-1.41 4.5-2.13 7.01-2.13 7.72 0 15.6 7.05 15.91 14.23.22 4.98-1.45 10.86-3.06 16.54-1.9 6.73-3.55 12.54-2.06 16.49.22.59.78.97 1.4.97l7.29-.25h.07c8.16 0 14.8 6.64 14.81 14.79l.05 42.21c0 2.91-1.12 5.64-3.18 7.69a10.81 10.81 0 01-7.69 3.19h-.07z" />
  </svg>
</div>

<div class="icon-wrap">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
    <defs>
      <clipPath id="clip">
        <rect x="0" y="0" width="100%" height="100%" fill="#000"></rect>
        <path fill="#fff" d="M62.05 7.31c6.86 0 14.13 6.46 14.41 12.79c0.21 4.74-1.42 10.5-3 16.07c-1.98 6.98-3.68 13.01-2.02 17.42a3 3 0 0 0 2.81 1.94h0.11l7.2-0.25h0.06c7.33 0 13.3 5.96 13.31 13.3l0.05 42.21c0 2.5-0.97 4.86-2.74 6.63s-4.12 2.75-6.63 2.75h-0.08c-8.6-0.07-21.51-0.41-34.19-1.6c-8.6-0.81-17.48-2.09-24.11-5.85c-2.2-1.25-4.58-1.54-6.49-1.78c-0.76-0.09-1.47-0.18-2.03-0.32c-4.2-0.99-7.14-4.61-7.15-8.8l-0.08-32.75c-0.01-3.78 2.69-6.95 6.42-7.53c0.15-0.02 0.31-0.06 0.45-0.11c0.56-0.18 13.94-4.55 24.05-12.45c4.87-3.81 9.05-9.67 11.17-15.68s2.1-12.36 2.09-17.5c0-2.44-0.01-5.74 0.41-6.74a10.97 10.97 0 0 1 5.98-1.75"></path>
      </clipPath>
    </defs>
    <radialGradient id="a" cx="51.77" cy="31.401" r="87.039" gradientTransform="matrix(-.00218 1 -.7873 -.00172 76.604 -20.315)" gradientUnits="userSpaceOnUse">
      <stop offset=".6" stop-color="#FFCA28" />
      <stop offset="1" stop-color="#FFB300" />
    </radialGradient>
    <path clip-path="url(#clip)" fill="url(#a)" d="M85.52 121.67c-8.63-.07-21.58-.41-34.32-1.61-8.77-.83-17.83-2.14-24.71-6.04-1.94-1.1-4.06-1.37-5.94-1.6-.8-.1-1.55-.19-2.19-.34-4.88-1.15-8.29-5.37-8.31-10.26l-.07-32.75c-.01-4.53 3.22-8.32 7.69-9.02.08-.01.15-.03.23-.05.55-.18 13.69-4.46 23.59-12.2 4.66-3.64 8.65-9.25 10.68-15 2.02-5.73 2.01-11.98 2-17 0-3.24-.01-7.27.87-7.86 2.14-1.41 4.5-2.13 7.01-2.13 7.72 0 15.6 7.05 15.91 14.23.22 4.98-1.45 10.86-3.06 16.54-1.9 6.73-3.55 12.54-2.06 16.49.22.59.78.97 1.4.97l7.29-.25h.07c8.16 0 14.8 6.64 14.81 14.79l.05 42.21c0 2.91-1.12 5.64-3.18 7.69a10.81 10.81 0 01-7.69 3.19h-.07z" />
  </svg>
</div>

变通方案：

将<mask>替换为<clipPath>
对剪切形状（如孔）使用复合路径（例如字母O）
尝试另一个表情库与一个更简单/清洁的svg结构

赞(0）回复(0）举报 2023-01-03

rjzwgtxy2#

safari有一个很大的问题，svg不能正确地呈现在设备的视网膜显示器上。
尝试添加：

-webkit-transform: translate3d(0,0,0)

到svg。
如果没有，它可能无法修复，因为Safari中的任何svg都不能很好地与大纲一起工作。
还可以尝试添加：

shape-rendering="geometricPrecision"

到svg。
如果不起作用，请尝试：

shape-rendering = "crispEdges"

而不是geometricPrecision，它通过浏览器禁用图像的消除锯齿功能。

赞(0）回复(0）举报 2023-01-03

我来回答

css 在移动的中查看时SVG的边缘模糊

2条答案

变通方案：

相关问题

热门标签

最新问答