我正在研究一個小的 svg 組件，它可以生成如下面的代碼片段所示的圖表。
我想影片它。現在，我只是嘗試制作類似呼吸的效果，但線條影片無法正確回圈。我把它分成兩部分，并使用一種animateTransform技巧在另一個正在執行時暫停一個。它適用于第一次迭代，但不適用于第二次和其他迭代。
對于可能遇到此主題的 SVG Jedi，請告訴我是否應該更改某些影片屬性以使其更流暢/性能更好。這是許多試驗和錯誤的產物，我不是該領域的專家。
相關部分在這里
<line :x1="ox" :y1="oy" :stroke="isHeading ? 'white' : '#FFFFF0'">
<animateTransform
id="pause"
begin="expandAnim.end"
dur="3s"
type="translate"
attributeType="XML"
attributeName="transform"
repeatCount="indefinite"
/>
<animateTransform
id="pause2"
begin="pause.end"
dur="3s"
type="translate"
attributeType="XML"
attributeName="transform"
repeatCount="indefinite"
/>
<animate
id="expandAnim"
attributeName="x2"
:from="cx"
:to="dx"
dur="3s"
begin="0; pause.end"
repeatCount="indefinite"
/>
<animate
fill="freeze"
attributeName="y2"
:from="cy"
:to="dy"
dur="3s"
begin="0; pause.end"
repeatCount="indefinite"
/>
<animate
id="collapseAnim"
attributeName="x2"
fill="freeze"
:from="dx"
:to="cx"
dur="3s"
begin="3; expandAnim.end"
repeatCount="indefinite"
/>
<animate
attributeName="y2"
fill="freeze"
:from="dy"
:to="cy"
dur="3s"
begin="3; expandAnim.end"
repeatCount="indefinite"
/>
</line>
這是一個完整的代碼片段版本（如果您知道如何折疊代碼，請編輯）
svg {
background-color:black
}
.is-hl {
fill: white;
stroke: white;
}
.heading-placeholder {
fill: transparent;
stroke: white;
}
circle {
fill: transparent;
stroke: white;
}<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" class="article-fingerprint d-flex">
<rect id="overlay" width="100%" height="100%" fill="url(#g1)"></rect>
<g transform="translate(125, 125)">
<circle fill="url(#bgGradient)" cx="0" cy="0" r="64.66666666666667"></circle>
<g class="type-element" idx="0">
<line x1="3.959691317243109e-15" y1="-64.66666666666667" stroke="#FFFFF0">
<animateTransform id="pause" begin="expandAnim.end" dur="3s" type="translate" attributeType="XML" attributeName="transform" repeatCount="indefinite"></animateTransform>
<animateTransform id="pause2" begin="pause.end" dur="3s" type="translate" attributeType="XML" attributeName="transform" repeatCount="indefinite"></animateTransform>
<animate id="expandAnim" attributeName="x2" from="5.5460389524011505e-15" to="6.158362351974827e-15" dur="3s" begin="0; pause.end" repeatCount="indefinite"></animate>
<animate fill="freeze" attributeName="y2" from="-90.57368959380808" to="-100.57368959380808" dur="3s" begin="0; pause.end" repeatCount="indefinite"></animate>
<animate id="collapseAnim" attributeName="x2" fill="freeze" from="6.158362351974827e-15" to="5.5460389524011505e-15" dur="3s" begin="3; expandAnim.end" repeatCount="indefinite"></animate>
<animate attributeName="y2" fill="freeze" from="-100.57368959380808" to="-90.57368959380808" dur="3s" begin="3; expandAnim.end" repeatCount="indefinite"></animate>
</line>
<circle cx="3.959691317243109e-15" cy="-64.66666666666667" r="1" class="origin"></circle>
<!---->
<!---->
<path id="circlePath24336" d="M5.5460389524011505e-15,-90.57368959380808 L6.158362351974827e-15,-100.57368959380808 L5.5460389524011505e-15,-90.57368959380808" fill="none"></path>
<circle r="2.590702292714141">
<animateMotion dur="6s" repeatCount="indefinite" fill="freeze">
<mpath xlink:href="#circlePath24336"></mpath>
</animateMotion>
</circle>
</g>
</g>
</svg>As a side question, as I didn't dive in the performance aspect of it yet, does it look like a wise way to proceed with this animation? Or would it be better to stick to a CSS scale animation with the center as origin?
Extra question also: is it feasible to trigger this animation on hover? I haven't spent too much time on it but since the small animated lines and circles are in a child component of the overlay used to trigger, I'm not sure of how to propagate a SVG event such as e.g. overlay.mouseover to it. Note that I'm using vue.
uj5u.com熱心網友回復：
因為你的影片很復雜。我沒有費心去除錯它。我只是用更簡單的形式重寫了它。
svg {
background-color:black
}
.is-hl {
fill: white;
stroke: white;
}
.heading-placeholder {
fill: transparent;
stroke: white;
}
circle {
fill: transparent;
stroke: white;
}<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" class="article-fingerprint d-flex">
<rect id="overlay" width="100%" height="100%" fill="url(#g1)"></rect>
<g transform="translate(125, 125)">
<circle fill="url(#bgGradient)" cx="0" cy="0" r="64.66666666666667"></circle>
<g class="type-element" idx="0">
<line x1="3.959691317243109e-15" y1="-64.66666666666667" stroke="#FFFFF0">
<animate attributeName="x2"
dur="6s" repeatCount="indefinite"
values="0; 0; 0"
keyTimes="0; 0.5; 1"/>
<animate attributeName="y2"
dur="6s" repeatCount="indefinite"
values="-90.573; -100.573; -90.573"
keyTimes="0; 0.5; 1"/>
</line>
<circle r="2.590702292714141">
<animateTransform attributeName="transform"
type="translate"
dur="6s" repeatCount="indefinite"
values="0,-90.573; 0,-100.573; 0,-90.573"
keyTimes="0; 0.5; 1"/>
</circle>
</g>
</g>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/404503.html
標籤：