如何將藍色更改為透明？
.exit {
top: auto;
bottom: -47.63px;
margin: auto;
right: 0;
left: 0;
width: 47.63px;
height: 47.63px;
cursor: pointer;
border: none;
background: none;
padding: 0;
border-radius: 50%;
clip-path: circle(50%);
}
.exit svg {
fill: red;
} <button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<g id="exit">
<title>exit</title>
<path fill="red" d="m-101.116-101.116a143 143 0 11202.232 202.232a143 143 0 01-202.232-202.232zzzz" />
<circle cx="0" cy="0" r="113" />
<path fill="blue" d="m-101.116-101.116m169.705 11.313a113 113 0 00-137.178 0l68.589 68.59zm-158.392 21.214a113 113 0 000 137.178l68.59-68.589zm21.214 158.392a113 113 0 00137.178 0l-68.589-68.59zm158.392-21.214a113 113 0 000-137.178l-68.59 68.589z" />
</g>
</svg>
</button>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>uj5u.com熱心網友回復：
<path fill="blue">到<path fill="transparent">第 7 行
<path fill="transparent" d="m-101.116-101.116m169.705 11.313a113 113 0 00-137.178 0l68.589 68.59zm-158.392 21.214a113 113 0 000 137.178l68.59-68.589zm21.214 158.392a113 113 0 00137.178 0l-68.589-68.59zm158.392-21.214a113 113 0 000-137.178l-68.59 68.589z" />
uj5u.com熱心網友回復：
您可以在標簽中設定不透明度，但正如您將在示例中看到的，藍色形狀位于紅色圓圈上方，因此我認為調整透明度不會產生您正在尋找的效果。
<path fill="blue" opacity="50%" d="m-101.116-101.116m169.705 11.313a113 113 0 00-137.178 0l68.589 68.59zm-158.392 21.214a113 113 0 000 137.178l68.59-68.589zm21.214 158.392a113 113 0 00137.178 0l-68.589-68.59zm158.392-21.214a113 113 0 000-137.178l-68.59 68.589z" />
我建議您更改創建 svg 的方式，從紅色形狀中沖出藍色形狀，然后匯出 svg，這將為您提供所需的結果，除非您只想顯示紅色圓圈？
編輯：您的圖形由以下形狀從左到右相互重疊。最右邊的影像是由其他三個組成的最終圖形。所以使藍色透明將顯示一個紅色圓圈。
uj5u.com熱心網友回復：
您現在擁有它的方式無法歸檔它，transparent或者none盡管您可以將其填充為白色作為背景。
.exit {
top: auto;
bottom: -47.63px;
margin: auto;
right: 0;
left: 0;
width: 47.63px;
height: 47.63px;
cursor: pointer;
border: none;
background: none;
padding: 0;
border-radius: 50%;
clip-path: circle(50%);
}
svg,use{fill:blue}
button:hover svg,
button:hover use
{fill:white}<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<g id="exit">
<title>exit</title>
<path fill="red" d="m-101.116-101.116a143 143 0 11202.232 202.232a143 143 0 01-202.232-202.232zzzz" />
<circle cx="0" cy="0" r="113" fill="red" />
<path d="m-101.116-101.116m169.705 11.313a113 113 0 00-137.178 0l68.589 68.59zm-158.392 21.214a113 113 0 000 137.178l68.59-68.589zm21.214 158.392a113 113 0 00137.178 0l-68.589-68.59zm158.392-21.214a113 113 0 000-137.178l-68.59 68.589z" />
</g>
</svg>
</button>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>但是，如果您需要它是透明的，我會像這樣更改代碼：我使用由兩條路徑制成的面具來刺穿紅色底座。請注意，在面具中，本應是一個洞的地方被填充為白色，而可見部分則保持為黑色。
.exit {
top: auto;
bottom: -47.63px;
margin: auto;
right: 0;
left: 0;
width: 47.63px;
height: 47.63px;
cursor: pointer;
border: none;
background: none;
padding: 0;
border-radius: 50%;
clip-path: circle(50%);
}
svg,use{fill:blue}
button:hover svg,
button:hover use
{fill:none} <button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<g id="exit">
<title>exit</title>
<circle cx="0" cy="0" r="113" />
<path fill="red" mask="url(#m)" d="m-101.116-101.116a143 143 0 11202.232 202.232a143 143 0 01-202.232-202.232zzzz" />
<mask id="m">
<path fill="white" d="m-101.116-101.116a143 143 0 11202.232 202.232a143 143 0 01-202.232-202.232zzzz" />
<path fill="black" d="m-101.116-101.116m169.705 11.313a113 113 0 00-137.178 0l68.589 68.59zm-158.392 21.214a113 113 0 000 137.178l68.59-68.589zm21.214 158.392a113 113 0 00137.178 0l-68.589-68.59zm158.392-21.214a113 113 0 000-137.178l-68.59 68.589z" />
</mask>
</g>
</svg>
</button>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>另一個觀察：為了一致性，我將只使用<use>按鈕內的元素，方法是使 svg 元素在 width="0" height="0" 和 position:absolute 的情況下不可見；
此外，您不需要按鈕內 svg 元素內的 width="100%" 。默認情況下，它們將是 100% 寬
.exit {
top: auto;
bottom: -47.63px;
margin: auto;
right: 0;
left: 0;
width: 47.63px;
height: 47.63px;
cursor: pointer;
border: none;
background: none;
padding: 0;
border-radius: 50%;
clip-path: circle(50%);
}
svg[width = "0"]{
position:absolute;
left:-100em;}
use{fill:blue}
button:hover use
{fill:none}<svg width="0" height="0">
<g id="exit">
<title>exit</title>
<circle cx="0" cy="0" r="113" />
<path fill="red" mask="url(#m)" d="m-101.116-101.116a143 143 0 11202.232 202.232a143 143 0 01-202.232-202.232zzzz" />
<mask id="m">
<path fill="white" d="m-101.116-101.116a143 143 0 11202.232 202.232a143 143 0 01-202.232-202.232zzzz" />
<path fill="black" d="m-101.116-101.116m169.705 11.313a113 113 0 00-137.178 0l68.589 68.59zm-158.392 21.214a113 113 0 000 137.178l68.59-68.589zm21.214 158.392a113 113 0 00137.178 0l-68.589-68.59zm158.392-21.214a113 113 0 000-137.178l-68.59 68.589z" />
</mask>
</g>
</svg>
<button class="exit" type="button" aria-label="Close">
<svg viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
<button class="exit" type="button" aria-label="Close">
<svg viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
<button class="exit" type="button" aria-label="Close">
<svg viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
<button class="exit" type="button" aria-label="Close">
<svg viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
<!--You can add as many buttons you want using rhe same structure-->
<button class="exit" type="button" aria-label="Close">
<svg viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
<button class="exit" type="button" aria-label="Close">
<svg viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/361045.html
上一篇：Svg反應本機
下一篇：SVG陰影不重復元素輪廓