為什么設定一個 svg viewBox 說0 0 1 1導致我的過濾器消失？我還嘗試使用x、y、height和width屬性以及更改primitiveUnits屬性，但沒有任何效果。任何幫助，將不勝感激。
svg {
border: 1px solid red;
height: 100px;
width: 100px;
}
svg circle {
fill: black;
}<html>
<body>
<svg viewBox="0 0 1 1">
<defs>
<filter id="halo1">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<circle cx="50%" cy="50%" r="25%" filter="url(#halo1)"></circle>
</svg>
<svg>
<defs>
<filter id="halo2">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<circle cx="50%" cy="50%" r="25%" filter="url(#halo2)"></circle>
</svg>
</body>
</html>小提琴操場：https ://jsfiddle.net/6x34urzg/14/
uj5u.com熱心網友回復：
當影像從 1x1 (the viewBox="0 0 1 1") 縮放到 100x100 px 時，標準偏差 ( stdDeviation="3") 也會被縮放。帶有過濾器的圓圈仍然存在，但太大了 100 倍。
如果您將標準偏差設定為 1/100 ( stdDeviation=".03")，您將獲得與其他 SVG 相同的結果。
svg {
border: 1px solid red;
height: 100px;
width: 100px;
}
svg circle {
fill: black;
}<html>
<body>
<svg viewBox="0 0 1 1">
<defs>
<filter id="halo1">
<feGaussianBlur in="SourceGraphic" stdDeviation=".03" />
</filter>
</defs>
<circle cx="50%" cy="50%" r="25%" filter="url(#halo1)"></circle>
</svg>
<svg>
<defs>
<filter id="halo2">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<circle cx="50%" cy="50%" r="25%" filter="url(#halo2)"></circle>
</svg>
</body>
</html>uj5u.com熱心網友回復：
實際上，在 CSS 中，您知道將 CSS 插入 HTML，例如 Internal CSS 和 Inline CSS。內部 CSS 是您在內部標記上撰寫 css 并且通常用于在 SVG 上提供樣式。同時，行內 CSS 用于在您的程式（編碼）等??標簽上的唯一元素上撰寫 css。盡管您已經 writenn css svg，但您在“Hallo1”上的 svg 消失了，因為您的程式已寫入行內 CSS viewBox="0 0 1 1"使您的 svg“Halo 1”消失。此外， viewBox="0 0 1 1" 使您的圈子消失，因為 weight=1 和 height=1 因此導致的圈子很小，您看不到。要解決該問題，您可以將 viewBox 更改為 'viewBox="0 0 100 100" '
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/441466.html