时间戳

首页 > 解决方案 > 在浏览器上，为什么这个SVG图标的内部透明区域在较小的尺寸下会变灰

html - 在浏览器上，为什么这个SVG图标的内部透明区域在较小的尺寸下会变灰

问题描述

我有一个 SVG 图标，我想在按钮中的副本旁边使用它。所以我将其设为 16x16，但这会导致 SVG 的内部透明区域变为灰色。这只发生在 Chrome 和 Firefox 等浏览器中。当我在另一个桌面应用程序（如 Illustrator）中调整 SVG 的大小时，我看不到较小尺寸的奇怪的灰色效果。

以下是从 Chrome 中呈现的 SVG 截取的屏幕截图：

SVG (16x16)，内部为灰色， 圆形填充加号

SVG (24x24) 看起来不错， 圆形填充加号

这是有问题的SVG代码。您可以将其保存在具有 SVG 扩展名的文件中，然后在 Chrome 等浏览器中查看以查看问题。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="510px" height="510px" viewBox="0 0 510 510" style="enable-background:new 0 0 510 510;" xml:space="preserve">
<g>
    <g id="add-circle">
        <path d="M255,0C114.75,0,0,114.75,0,255s114.75,255,255,255s255-114.75,255-255S395.25,0,255,0z M382.5,280.5h-102v102h-51v-102    h-102v-51h102v-102h51v102h102V280.5z"/>
    </g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

标签： htmlcsssvgbrowser

解决方案

您可以编辑形状以使十字变大 - 避免抗锯齿。或者您可以对中心“+”应用过滤器以强制所有半透明像素完全透明。这将有效地使中央“+”看起来更大。

强烈建议不要使用过滤器方法而只编辑形状。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 510 510" >
  
  <defs>
    <filter id="undo-anti-aliasing">
      <feFlood x="105" y="105" width="300" height="300" flood-color="white" flood-opacity="1" result="mask"/>
      
      <feComposite operator="out" in2="mask" in="SourceGraphic" result="masked-source"/>
      
      <feComposite operator="in" in2="mask" in="SourceGraphic"/>
      <feComponentTransfer>
        <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 1"/>
      </feComponentTransfer>
      
      <feComposite operator="over" in2="masked-source"/> 
      
      
    </filter>
  </defs>
<g>
    <g id="add-circle" filter="url(#undo-anti-aliasing)">
        <path d="M255,0C114.75,0,0,114.75,0,255s114.75,255,255,255s255-114.75,255-255S395.25,0,255,0z M382.5,280.5h-102v102h-51v-102    h-102v-51h102v-102h51v102h102V280.5z"/>
    </g>
</g>

</svg>

推荐阅读