是否可以轉換
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>
uj5u.com熱心網友回復:
這是一個更簡單的手寫 SVG,應該可以完成這項作業。當您通過影像元素將 SVG 包含在另一個 SVG 檔案中時,如果影像元素的尺寸與參考檔案的尺寸不匹配,則縱橫比將更改以適合影像元素的尺寸。
如果您不希望發生這種情況,則必須為影像元素指定“preserveAspectRatio”屬性。使用preserveAspectRatio 元素,您可以指定參考的SVG 在影像元素中的定位方式,以及是保留較大還是較小的維度。
- 定位是 xMin/xMid/xMax 和 yMin/yMid/yMax 的組合,例如。xMidYMid 將參考影像在影像元素內居中。
- 保護標志要么是“切片”——它將使用參考影像的較小尺寸完全填充影像元素;或“滿足” - 將較大的維度放入影像元素中,用空白填充較小的維度。
在您的情況下,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>
uj5u.com熱心網友回復:
不幸的是,如果 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>
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/312389.html
上一篇:為什么當寬度為736px時svgLogoMonniMobile不可見?
下一篇:更改SVG文本
