将 png 格式的阴影转换为 svg答案

【问题标题】：Convert shadow in png format to svg将 png 格式的阴影转换为 svg
【发布时间】：2021-11-24 02:44:26
【问题描述】：

到 svg 格式？我尝试过在线转换器，但它们没有用。

我已经设法使用 svgicon 插件为传单创建了阴影，但是当我在 figma 中导入该 svg 时，它并没有保持其形状。

这里是svg：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" style="width:40px; height:72">
  <filter id="iconShadowBlur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="0.5"></feGaussianBlur>
  </filter>
  <path filter="url(#iconShadowBlur)" class="svg-icon-shadow" d="M 1 16 L 16 46 L 31 16 A 8 8 0 0 0 1 16 Z" fill="rgb(0,0,10)" stroke-width="2" stroke="rgb(0,0,10)" style="opacity: 0.5; transform-origin: 16px 48px; transform: rotate(5deg) translate(0px, 0px) scale(1, 0.5)"></path>
  <path class="svg-icon-path" d="M 1 16 L 16 46 L 31 16 A 8 8 0 0 0 1 16 Z" stroke-width="2" stroke="rgb(0,102,255)" stroke-opacity="1" fill="rgb(0,102,255)" fill-opacity="1"></path>
</svg>

【问题讨论】：

为什么要 SVG 格式？如果您只需要 .svg 文件格式，您可以使用 svg 图像元素将 png 图像包装到 svg 文件中。但是，如果您希望它是原生 SVG/响应式，那么您必须对 svg 圆圈应用一些阴影过滤器。
当我在 svg 中包含 png 时，它不平滑，您可以看到 png 何时以灰线开头。我想添加阴影过滤器，但我从未这样做过。这个插件会生成阴影，所以我会尝试修改 iatkin.github.io/leaflet-svgicon

标签： svg png

【解决方案1】：

不幸的是，如果 Figma 不支持过滤器，那么实际上没有任何好的替代解决方案。

我想你可以用不同的形状分层一堆形状你可以分层一堆半透明的形状。但这有点hacky。

.small {
  width: 24px;
}

<svg class="small" viewBox="0 0 24 24">
  <g fill="black">
    <circle cx="12" cy="12" r="12" fill-opacity="0.05"/>
    <circle cx="12" cy="12" r="11" fill-opacity="0.1"/>
    <circle cx="12" cy="12" r="10" fill-opacity="0.1"/>
    <circle cx="12" cy="12" r="9" fill-opacity="0.2"/>
    <circle cx="12" cy="12" r="8" fill-opacity="0.2"/>
    <circle cx="12" cy="12" r="7" fill-opacity="0.3"/>
    <circle cx="12" cy="12" r="6"/>
  </g>
</svg>

<svg viewBox="0 0 24 24">
  <g fill="black">
    <circle cx="12" cy="12" r="12" fill-opacity="0.05"/>
    <circle cx="12" cy="12" r="11" fill-opacity="0.1"/>
    <circle cx="12" cy="12" r="10" fill-opacity="0.1"/>
    <circle cx="12" cy="12" r="9" fill-opacity="0.2"/>
    <circle cx="12" cy="12" r="8" fill-opacity="0.2"/>
    <circle cx="12" cy="12" r="7" fill-opacity="0.3"/>
    <circle cx="12" cy="12" r="6"/>
  </g>
</svg>

【讨论】：

【解决方案2】：

这是一个更简单的手写 SVG，应该可以完成这项工作。当您通过图像元素将 SVG 包含在另一个 SVG 文件中时，如果图像元素的尺寸与引用文件的尺寸不匹配，则会更改纵横比以适应图像元素的尺寸。

如果您不希望发生这种情况，则必须为图像元素指定“preserveAspectRatio”属性。使用 preserveAspectRatio 元素，您可以指定引用的 SVG 应如何在图像元素中定位，以及是否应保留较大或较小的尺寸。

定位是一个组合 xMin/xMid/xMax 和 yMin/yMid/yMax 例如。 xMidYMid 将在图像元素中居中引用图像。
保护标志是“切片” - 它将使用参考图像的较小尺寸完全填充图像元素；或“meet” - 将较大的尺寸放入图像元素中，用空白空间填充较小的尺寸。

在您的情况下，preserveAspectRatio = "xMidYMid meet" 可能是您想要的，但您可以使用这些选项。

<svg xmlns="http://www.w3.org/2000/svg" width="50px" height="20px" viewBox="0 0 50 20">
  <defs>
    <filter id="blur" filterUnits="userSpaceOnUse">
      <feGaussianBlur stdDeviation="2"/>
    </filter>
  </defs>
  
  <g filter="url(#blur)">
  <circle fill="#888" cx="20" cy="10" r="5"/>
  <polygon fill="#888" points="20,5 40,5 20,15z"/>
  </g>
</svg>

【讨论】：

以不同的方式解决了问题，但这是正确的答案，谢谢。