我是影片 SVG主題切換集合的作者。我注意到任何涉及翻譯掩碼的內容在 Chromium 瀏覽器上都非常不穩定，但在 Firefox 上卻很好。
有問題的切換是經典和擴展
影片似乎受到限制，可能是因為 Chromium 認為面具不在視野范圍內。雖然這個問題似乎在大多數情況下都存在，但在少數情況下他們確實在 Chromium 上作業，我無法解釋為什么他們有時會作業。
任何解決此問題的幫助將不勝感激。我發現了與此處描述的Firefox類似的問題，但還沒有完全弄清楚解決方案的原因。
.theme-toggle {
font-size: 10rem;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/classic.min.css" rel="stylesheet"/>
<label class="theme-toggle">
<input type="checkbox" />
<span class="theme-toggle-sr">Toggle theme</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
fill="currentColor"
stroke-linecap="round"
class="theme-toggle__classic"
viewBox="0 0 32 32"
>
<mask id="theme-toggle__classic__cutout" color="#000">
<path fill="#fff" d="M0 0h32v32H0z" />
<circle cx="34" cy="2" r="8" />
</mask>
<circle
cx="16"
cy="16"
r="9.34"
mask="url(#theme-toggle__classic__cutout)"
/>
<g
stroke="currentColor"
class="theme-toggle__classic__sun-rays"
mask="url(#theme-toggle__classic__cutout)"
>
<path d="M16 5.5v-4" />
<path d="M16 30.5v-4" />
<path d="M1.5 16h4" />
<path d="M26.5 16h4" />
<path d="m23.4 8.6 2.8-2.8" />
<path d="m5.7 26.3 2.9-2.9" />
<path d="m5.8 5.8 2.8 2.8" />
<path d="m23.4 23.4 2.9 2.9" />
</g>
</svg>
</label>uj5u.com熱心網友回復：
這似乎至少可以提高 Chromium 的性能。我做了三個改變：
- 將蒙版換成剪輯路徑
- 僅將剪輯路徑應用于包含圓和射線的父組一次
- 這一點有所不同：不要直接轉換
transform, 而是d直接轉換路徑資料。對于 Chrome (99) 和 Firefox (98)，您現在可以撰寫 CSS 語法d: path('...')并對路徑資料進行影片處理。它還不適用于 Safari。
.theme-toggle.theme-toggle--reversed .theme-toggle__classic {
transform: scale(-1,1)
}
.theme-toggle {
--theme-toggle__classic--duration: 750ms
}
.theme-toggle__classic * {
transition-property: opacity,transform,d;
transition-timing-function: cubic-bezier(0,0,0.15,1.25);
transform-origin: center;
transition-duration: var(--theme-toggle__classic--duration);
transition-delay: calc(var(--theme-toggle__classic--duration) / 5);
}
.theme-toggle__classic #theme-toggle__classic__cutout path {
transition-delay: 0s;
d: path('M0-10h34v4a8 8 0 108 8h1v32h-43z');
}
.theme-toggle input[type=checkbox]:checked~.theme-toggle__classic .theme-toggle__classic__sun-rays *,
.theme-toggle--toggled:not(label).theme-toggle .theme-toggle__classic .theme-toggle__classic__sun-rays * {
transform: scale(.5) rotate(45deg);
opacity: 0;
transition-delay: 0s
}
.theme-toggle input[type=checkbox]:checked~.theme-toggle__classic #theme-toggle__classic__cutout path,
.theme-toggle--toggled:not(label).theme-toggle .theme-toggle__classic #theme-toggle__classic__cutout path {
d: path('M-11 0h34v4a8 8 0 108 8h1v32h-43z');
transition-delay: calc(var(--theme-toggle__classic--duration) / 5)
}
button.theme-toggle,label.theme-toggle {
border: none;
background: 0 0;
cursor: pointer
}
button.theme-toggle input[type=checkbox],label.theme-toggle input[type=checkbox] {
display: none
}
button.theme-toggle .theme-toggle-sr,label.theme-toggle .theme-toggle-sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border-width: 0
}
.theme-toggle {
font-size: 10rem;
}<label class="theme-toggle">
<input type="checkbox" />
<span class="theme-toggle-sr">Toggle theme</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
fill="currentColor"
stroke-linecap="round"
class="theme-toggle__classic"
viewBox="0 0 32 32"
>
<clipPath id="theme-toggle__classic__cutout">
<path />
</clipPath>
<g clip-path="url(#theme-toggle__classic__cutout)">
<circle cx="16" cy="16" r="9.34" />
<g
stroke="currentColor"
class="theme-toggle__classic__sun-rays"
>
<path d="M16 5.5v-4" />
<path d="M16 30.5v-4" />
<path d="M1.5 16h4" />
<path d="M26.5 16h4" />
<path d="m23.4 8.6 2.8-2.8" />
<path d="m5.7 26.3 2.9-2.9" />
<path d="m5.8 5.8 2.8 2.8" />
<path d="m23.4 23.4 2.9 2.9" />
</g>
</g>
</svg>
</label>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/446107.html
上一篇：通過MatchedGeometryEffect向上滑動視圖
下一篇：如何在指定時間更改屬性？C＃