SVG和SVG动画效率
SVG和SVG动画效率
提问于 2022-08-01 21:43:19
我刚刚开始玩SVG并给它们动画。我在中创建了一个矢量设计，并将其导出为SVG，然后将其动画化。灵感来源于克里斯·甘农的SVG钻石。不同的是，我尝试使用html和内联样式来创建它。
我将SVG称为背景图像，它依赖于页面上显示的一些元素。SVG在滚动或与页面上的其他元素交互时都会运行一些波动。我最好的猜测是，我的SVG是低效率的，因为这是我的第一次尝试。
请评论并建议我可以改进它以提高效率的方法。
还是通过JS呈现SVG并控制脚本中的动画？
链接https://codepen.io/nmballa/pen/LYdQVEm。
<svg class="diamond-SVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 625 625">
<g id="container">
<rect width="00" height="625" style="fill: none"/>
</g>
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="8" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g transform="translate(0,12.5)">
<g transform="rotate(180 300 300)">
<g id="lowerBackFacet1" filter="url(#glow)"><line x1="300" y1="0" x2="200" y2="425" style="fill:none;stroke:#b3d8fc;stroke-width:8"/>
<animateTransform attributeName="transform"
attributeType="XML"
begin="0s"
dur="2s"
calcMode="paced"
type="skewX"
from="0"
to="-25"
repeatCount="indefinite"/>
</g>
</g>
<g transform="rotate(180 300 300)">
<g id="lowerBackFacet2" filter="url(#glow)">
<line x1="300" y1="0" x2="400" y2="425" style="fill:none;stroke:#b3d8fc;stroke-width:8"/>
<animateTransform attributeName="transform"
attributeType="XML"
begin="0s"
dur="2s"
calcMode="paced"
type="skewX"
from="0"
to="-25"
repeatCount="indefinite"/>
</g>
</g>
<g transform="rotate(180 300 300)">
<g id="lowerBackFacet3" filter="url(#glow)">
<line x1="300" y1="0" x2="600" y2="425" style="fill:none;stroke:#b3d8fc;stroke-width:8"/>
<animateTransform attributeName="transform"
attributeType="XML"
begin="0s"
dur="2s"
calcMode="paced"
type="skewX"
from="0"
to="-25"
repeatCount="indefinite"/>
</g>
</g>
<g transform="rotate(180 300 300)">
<g id="lowerFrontFacet1" filter="url(#glow)">
<line x1="300" y1="0" x2="0" y2="425" style="fill:none;stroke:#54a9ff;stroke-width:8"/>
<animateTransform attributeName="transform"
attributeType="XML"
begin="0s"
dur="2s"
calcMode="paced"
type="skewX"
from="0"
to="25"
repeatCount="indefinite"/>
</g>
</g>
<g transform="rotate(180 300 300)">
<g id="lowerFrontFacet2" filter="url(#glow)">
<line x1="300" y1="0" x2="200" y2="425" style="fill:none;stroke:#54a9ff;stroke-width:8"/>
<animateTransform attributeName="transform"
attributeType="XML"
begin="0s"
dur="2s"
calcMode="paced"
type="skewX"
from="0"
to="25.5"
repeatCount="indefinite"/>
</g>
</g>
<g transform="rotate(180 300 300)">
<g id="lowerFrontFacet3" filter="url(#glow)">
<line x1="300" y1="0" x2="400" y2="425" style="fill:none;stroke:#54a9ff;stroke-width:8"/>
<animateTransform attributeName="transform"
attributeType="XML"
begin="0s"
dur="2s"
calcMode="paced"
type="skewX"
from="0"
to="25"
repeatCount="indefinite"/>
</g>
</g>
<g transform="rotate(180 0 0 300 300)">
<g id="upperBackFacet1" filter="url(#glow)">
<line x1="350" y1="0" x2="400" y2="175" style="stroke:#b3d8fc;stroke-width:8"/>
<animateMotion dur="2s" repeatCount="indefinite" path="M1, 0 100, 0 0" />
<animateTransform attributeName="transform"
attributeType="XML"
type="skewX"
from="0"
to="30"
dur="2s"
calcMode="paced"
repeatCount="indefinite"/>
</g>
</g>
<g transform="rotate(180 0 0 300 300)" >
<g id="upperBackFacet2" filter="url(#glow)">
<line x1="250" y1="0" x2="198" y2="175" style="stroke:#b3d8fc; stroke-width:8"/>
<animateMotion dur="2s" repeatCount="indefinite" path="M1, 0 100, 0 0" />
<animateTransform attributeName="transform"
attributeType="XML"
type="skewX"
from="0"
to="30"
dur="2s"
calcMode="paced"
repeatCount="indefinite"/>
</g>
</g>
<g transform="rotate(180 0 0 300 300)">
<g id="upperBackFacet3" filter="url(#glow)">
<line x1="150" y1="0" x2="0" y2="175" style="stroke:#b3d8fc; stroke-width:8"/>
<animateMotion dur="2s" repeatCount="indefinite" path="M1, 0 100, 0 0" />
<animateTransform attributeName="transform"
attributeType="XML"
type="skewX"
from="0"
to="30"
dur="2s"
calcMode="paced"
repeatCount="indefinite"/>
</g>
</g>
<g id="upperFrontFacet1" filter="url(#glow)">
<line x1="250" y1="0" x2="200" y2="175" style="stroke:#54a9ff; filter=url(#glow); stroke-width:8"/>
<animateMotion dur="2s" repeatCount="indefinite" path="M1, 0 -100 0 0" />
<animateTransform attributeName="transform"
attributeType="XML"
type="skewX"
from="0"
to="-30"
dur="2s"
calcMode="paced"
repeatCount="indefinite"/>
</g>
<g id="upperFrontFacet2" filter="url(#glow)">
<line x1="350" y1="0" x2="400" y2="175" style="stroke:#54a9ff;stroke-width:8"/>
<animateMotion dur="2s" repeatCount="indefinite" path="M1, 0 -100, 0 0" />
<animateTransform attributeName="transform"
attributeType="XML"
type="skewX"
from="0"
to="-30"
dur="2s"
calcMode="paced"
repeatCount="indefinite"/>
</g>
<g id="upperFrontFacet3" filter="url(#glow)">
<line x1="452" y1="0" x2="602" y2="175" style="stroke:#54a9ff;stroke-width:8"/>
<animateMotion dur="2s" repeatCount="indefinite" path="M1, 0 -100, 0 0" />
<animateTransform attributeName="transform"
attributeType="XML"
type="skewX"
from="0"
to="-30"
dur="2s"
calcMode="paced"
repeatCount="indefinite"/>
</g>
<g id="Center">
<line x1="5" y1="175" x2="595" y2="175" style="stroke: #54a9ff; stroke-width: 10px;"/>
</g>
<g transform="translate(300,300)" filter="url(#glow)">
<g id="Outside">
<line x1="300" y1="600" x2="600" y2="173" style="fill: none;"/>
<polygon points="300 0 450 0 450 0 600 175 300 600 0 175 150 0 300 0" transform="translate( -300 -300)" style="fill: none; stroke: #54a9ff; stroke-miterlimit: 10; stroke-width:8; "/>
<animateTransform attributeName="transform"
type="scaleX"
from="1 1"
to=".98 1"
begin="2s"
dur="2s"
calcMode="paced"
repeatCount="indefinite"/>
</g>
</g>
</g>
</svg>
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-08-02 16:04:00
过滤器是动画性能的主要因素。在下面的变体中，我用一个简单得多的设置替换了它:两行放在一起，下一行用stroke-width:16;opacity:0.3，上层行用stroke-width:8;opacity:1。对我来说，动画要流畅得多。
我还选择了一个spline动画，以提供一个更好的“旋转”错觉。这几乎不影响性能。其余的更改只是为了使代码更具可读性，在本质上是表面的。
.front {
fill: none;
stroke: #54a9ff;
stroke-width: 8;
}
.back {
fill: none;
stroke: #b3d8fc;
stroke-width: 8;
}
.upper {
transform: translate(12.5px, -162.5px);
}
.lower {
transform: translate(12.5px, 612.5px);
}
.blur {
stroke-width: 16;
opacity: 0.3;
}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 625 625">
<g class="upper back">
<g>
<line class="blur" x1="300" y1="175" x2="300" y2="350"/>
<line x1="300" y1="175" x2="300" y2="350"/>
<animateTransform attributeName="transform"
begin="0s"
dur="6s"
calcMode="spline"
keySplines=".43 0 .57 1"
type="skewX"
from="40.126"
to="-40.126"
repeatCount="indefinite"/>
</g>
<g>
<line class="blur" x1="300" y1="175" x2="300" y2="350"/>
<line x1="300" y1="175" x2="300" y2="350"/>
<animateTransform attributeName="transform"
begin="-2s"
dur="6s"
calcMode="spline"
keySplines=".43 0 .57 1"
type="skewX"
from="40.126"
to="-40.126"
repeatCount="indefinite"/>
</g>
<g>
<line class="blur" x1="300" y1="175" x2="300" y2="350"/>
<line x1="300" y1="175" x2="300" y2="350"/>
<animateTransform attributeName="transform"
begin="-4s"
dur="6s"
calcMode="spline"
keySplines=".43 0 .57 1"
type="skewX"
from="40.126"
to="-40.126"
repeatCount="indefinite"/>
</g>
</g>
<g class="upper front">
<g>
<line class="blur" x1="300" y1="175" x2="300" y2="350"/>
<line x1="300" y1="175" x2="300" y2="350"/>
<animateTransform attributeName="transform"
begin="0s"
dur="6s"
calcMode="spline"
keySplines=".43 0 .57 1"
type="skewX"
from="-40.126"
to="40.126"
repeatCount="indefinite"/>
</g>
<g>
<line class="blur" x1="300" y1="175" x2="300" y2="350"/>
<line x1="300" y1="175" x2="300" y2="350"/>
<animateTransform attributeName="transform"
begin="-2s"
dur="6s"
calcMode="spline"
keySplines=".43 0 .57 1"
type="skewX"
from="-40.126"
to="40.126"
repeatCount="indefinite"/>
</g>
<g>
<line class="blur" x1="300" y1="175" x2="300" y2="350"/>
<line x1="300" y1="175" x2="300" y2="350"/>
<animateTransform attributeName="transform"
begin="-4s"
dur="6s"
calcMode="spline"
keySplines=".43 0 .57 1"
type="skewX"
from="-40.126"
to="40.126"
repeatCount="indefinite"/>
</g>
</g>
<g class="lower back">
<g>
<line class="blur" x1="300" y1="-425" x2="300" y2="0"/>
<line x1="300" y1="-425" x2="300" y2="0"/>
<animateTransform attributeName="transform"
begin="0s"
dur="6s"
calcMode="spline"
keySplines=".4 0 .6 1"
type="skewX"
from="-34.765"
to="34.765"
repeatCount="indefinite"/>
</g>
<g>
<line class="blur" x1="300" y1="-425" x2="300" y2="0"/>
<line x1="300" y1="-425" x2="300" y2="0"/>
<animateTransform attributeName="transform"
begin="-2s"
dur="6s"
calcMode="spline"
keySplines=".4 0 .6 1"
type="skewX"
from="-34.765"
to="34.765"
repeatCount="indefinite"/>
</g>
<g>
<line class="blur" x1="300" y1="-425" x2="300" y2="0"/>
<line x1="300" y1="-425" x2="300" y2="0"/>
<animateTransform attributeName="transform"
begin="-4s"
dur="6s"
calcMode="spline"
keySplines=".4 0 .6 1"
type="skewX"
from="-34.765"
to="34.765"
repeatCount="indefinite"/>
</g>
</g>
<g class="lower front">
<g>
<line class="blur" x1="300" y1="-425" x2="300" y2="0"/>
<line x1="300" y1="-425" x2="300" y2="0"/>
<animateTransform attributeName="transform"
begin="0s"
dur="6s"
calcMode="spline"
keySplines=".4 0 .6 1"
type="skewX"
from="34.765"
to="-34.765"
repeatCount="indefinite"/>
</g>
<g>
<line class="blur" x1="300" y1="-425" x2="300" y2="0"/>
<line x1="300" y1="-425" x2="300" y2="0"/>
<animateTransform attributeName="transform"
begin="-2s"
dur="6s"
calcMode="spline"
keySplines=".4 0 .6 1"
type="skewX"
from="34.765"
to="-34.765"
repeatCount="indefinite"/>
</g>
<g>
<line class="blur" x1="300" y1="-425" x2="300" y2="0"/>
<line x1="300" y1="-425" x2="300" y2="0"/>
<animateTransform attributeName="transform"
begin="-4s"
dur="6s"
calcMode="spline"
keySplines=".4 0 .6 1"
type="skewX"
from="34.765"
to="-34.765"
repeatCount="indefinite"/>
</g>
</g>
<path transform="translate(312.5,12.5)" class="front blur" d="M 147.5,0 295,175 0,600 -295,175 -147.5,0z M 295,175 -295,175" />
<path transform="translate(312.5,12.5)" class="front" d="M 147.5,0 295,175 0,600 -295,175 -147.5,0z M 295,175 -295,175" />
</svg>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73199905
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号