PNG格式Leaflet标记阴影转SVG及导入Figma变形问题咨询

你要转换的Leaflet标记阴影PNG不需要使用在线转换工具，可直接使用修复后的SVG文件，完全匹配原图效果。
你之前生成的SVG导入Figma变形是因为代码中使用了Figma兼容度较低的内联CSS transform、transform-origin属性，同时存在属性缺失问题，按以下规则优化后即可正常使用：

• 补全svg根节点style中缺失的height单位，原代码里height:72改为height:72px，同时添加viewBox属性避免尺寸识别异常
• 把阴影路径的变换效果直接合并到路径坐标中，移除内联transform、transform-origin属性，Figma无法正确解析SVG内部的CSS变换规则，预计算变形后的路径可以保证形状100%还原
• 优化滤镜的作用范围属性，避免模糊边缘被截断

修复后可直接导入Figma的SVG代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="40px" height="72px" viewBox="0 0 40 72">
  <filter id="iconShadowBlur" x="-10%" y="-10%" width="120%" height="120%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="0.5"/>
  </filter>
  <path filter="url(#iconShadowBlur)" d="M 0.76 17.21 L 13.8 47.03 L 30.24 18.92 A 8 8 0 0 0 0.76 17.21 Z" fill="rgb(0,0,10)" stroke-width="2" stroke="rgb(0,0,10)" opacity="0.5"/>
  <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"/>
</svg>

上述代码已经预计算了阴影的旋转、缩放变换效果，导入Figma后形状不会发生改变，模糊、透明度等效果也能正常识别。

内容的提问来源于stack exchange，提问作者Nenad