我有一个我正在实现的菜单系统,它将为每个元素提供动画。我从Illustrator导出了SVG代码,我发现有一些潜在的优化领域。
有两层,彩色星星和彩色星星后面的白色星星。
菜单中的每颗星都是一样的,只是在不同的位置,顶层有不同的颜色。还有两个"拱门"这是完全相同的,只是定位不同。
SVG代码如下所示:
<g id="white_stars">
<g id="star_3">
<radialGradient id="SVGID_3_" cx="37138.957" cy="-8340.4863" r="53.5295" gradientTransform="matrix(-0.2812 0 0 -0.2812 10595.4463 -2308.418)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="0.12" style="stop-color:#FFFFFF;stop-opacity:0.7"/>
<stop offset="0.24" style="stop-color:#FFFFFF;stop-opacity:0.49"/>
<stop offset="0.35" style="stop-color:#FFFFFF;stop-opacity:0.34"/>
<stop offset="0.46" style="stop-color:#FFFFFF;stop-opacity:0.21"/>
<stop offset="0.58" style="stop-color:#FFFFFF;stop-opacity:0.12"/>
<stop offset="0.7" style="stop-color:#FFFFFF;stop-opacity:0.05"/>
<stop offset="0.84" style="stop-color:#FFFFFF;stop-opacity:0.01"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
</radialGradient>
<circle fill="url(#SVGID_3_)" cx="151.421" cy="37.544" r="15.093"/>
<circle fill="#FFFFFF" cx="151.421" cy="37.544" r="3.094"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="26139.7969" y1="-8190.5161" x2="26139.7969" y2="-8153.4463" gradientTransform="matrix(-0.4687 0 0 -0.4687 12403.4668 -3792.7949)">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
<stop offset="0.18" style="stop-color:#FFFFFF;stop-opacity:0.73"/>
<stop offset="0.29" style="stop-color:#FFFFFF"/>
<stop offset="0.79" style="stop-color:#FFFFFF"/>
<stop offset="0.82" style="stop-color:#FFFFFF;stop-opacity:0.85"/>
<stop offset="0.86" style="stop-color:#FFFFFF;stop-opacity:0.66"/>
<stop offset="0.9" style="stop-color:#FFFFFF;stop-opacity:0.5"/>
<stop offset="0.94" style="stop-color:#FFFFFF;stop-opacity:0.39"/>
<stop offset="0.98" style="stop-color:#FFFFFF;stop-opacity:0.32"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
</linearGradient>
<path opacity="0.46" fill="url(#SVGID_4_)" enable-background="new " d="M150.53,45.372V29.717
c0-0.469,0.375-0.844,0.844-0.844l0,0c0.469,0,0.844,0.375,0.844,0.844v15.655c0,0.469-0.375,0.844-0.844,0.844l0,0
C150.952,46.215,150.577,45.84,150.53,45.372z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="26125" y1="-8172.0156" x2="26154.3984" y2="-8172.0156" gradientTransform="matrix(-0.4687 0 0 -0.4687 12403.4668 -3792.7949)">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
<stop offset="0.18" style="stop-color:#FFFFFF;stop-opacity:0.73"/>
<stop offset="0.29" style="stop-color:#FFFFFF"/>
<stop offset="0.79" style="stop-color:#FFFFFF"/>
<stop offset="0.82" style="stop-color:#FFFFFF;stop-opacity:0.85"/>
<stop offset="0.86" style="stop-color:#FFFFFF;stop-opacity:0.66"/>
<stop offset="0.9" style="stop-color:#FFFFFF;stop-opacity:0.5"/>
<stop offset="0.94" style="stop-color:#FFFFFF;stop-opacity:0.39"/>
<stop offset="0.98" style="stop-color:#FFFFFF;stop-opacity:0.32"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
</linearGradient>
<path opacity="0.46" fill="url(#SVGID_5_)" enable-background="new " d="M144.531,37.544L144.531,37.544
c0,0.515,0.422,0.937,0.938,0.937h11.906c0.515,0,0.937-0.422,0.937-0.937l0,0c0-0.516-0.422-0.938-0.937-0.938h-11.906
C144.953,36.607,144.531,37.029,144.531,37.544z"/>
</g>
<g id="star_4">
<radialGradient id="SVGID_6_" cx="620.1162" cy="-244.0107" r="28.499" gradientTransform="matrix(0.4687 0 0 0.4687 -81.451 159.046)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="0.12" style="stop-color:#FFFFFF;stop-opacity:0.7"/>
<stop offset="0.14" style="stop-color:#FFFFFF;stop-opacity:0.66"/>
<stop offset="0.24" style="stop-color:#FFFFFF;stop-opacity:0.49"/>
<stop offset="0.35" style="stop-color:#FFFFFF;stop-opacity:0.34"/>
<stop offset="0.46" style="stop-color:#FFFFFF;stop-opacity:0.21"/>
<stop offset="0.58" style="stop-color:#FFFFFF;stop-opacity:0.12"/>
<stop offset="0.7" style="stop-color:#FFFFFF;stop-opacity:0.05"/>
<stop offset="0.84" style="stop-color:#FFFFFF;stop-opacity:0.01"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
</radialGradient>
<circle fill="url(#SVGID_6_)" cx="209.447" cy="46.075" r="15.093"/>
<circle fill="#FFFFFF" cx="209.447" cy="46.075" r="3.094"/>
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="26015.8984" y1="-8208.7705" x2="26015.8984" y2="-8171.7026" gradientTransform="matrix(-0.4687 0 0 -0.4687 12403.4668 -3792.7949)">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
<stop offset="0.18" style="stop-color:#FFFFFF;stop-opacity:0.73"/>
<stop offset="0.29" style="stop-color:#FFFFFF"/>
<stop offset="0.79" style="stop-color:#FFFFFF"/>
<stop offset="0.82" style="stop-color:#FFFFFF;stop-opacity:0.85"/>
<stop offset="0.86" style="stop-color:#FFFFFF;stop-opacity:0.66"/>
<stop offset="0.9" style="stop-color:#FFFFFF;stop-opacity:0.5"/>
<stop offset="0.94" style="stop-color:#FFFFFF;stop-opacity:0.39"/>
<stop offset="0.98" style="stop-color:#FFFFFF;stop-opacity:0.32"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
</linearGradient>
<path opacity="0.46" fill="url(#SVGID_7_)" enable-background="new " d="M208.604,53.902V38.247
c0-0.469,0.374-0.843,0.843-0.843l0,0c0.469,0,0.844,0.375,0.844,0.843v15.655c0,0.469-0.375,0.844-0.844,0.844l0,0
C208.979,54.746,208.604,54.371,208.604,53.902z"/>
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="26001.1992" y1="-8190.2148" x2="26030.6348" y2="-8190.2148" gradientTransform="matrix(-0.4687 0 0 -0.4687 12403.4668 -3792.7949)">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
<stop offset="0.18" style="stop-color:#FFFFFF;stop-opacity:0.73"/>
<stop offset="0.29" style="stop-color:#FFFFFF"/>
<stop offset="0.79" style="stop-color:#FFFFFF"/>
<stop offset="0.82" style="stop-color:#FFFFFF;stop-opacity:0.85"/>
<stop offset="0.86" style="stop-color:#FFFFFF;stop-opacity:0.66"/>
<stop offset="0.9" style="stop-color:#FFFFFF;stop-opacity:0.5"/>
<stop offset="0.94" style="stop-color:#FFFFFF;stop-opacity:0.39"/>
<stop offset="0.98" style="stop-color:#FFFFFF;stop-opacity:0.32"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
</linearGradient>
<path opacity="0.46" fill="url(#SVGID_8_)" enable-background="new " d="M202.558,46.075L202.558,46.075
c0,0.516,0.422,0.938,0.938,0.938H215.4c0.516,0,0.938-0.422,0.938-0.938l0,0c0-0.516-0.422-0.938-0.938-0.938h-11.905
C202.979,45.137,202.558,45.559,202.558,46.075z"/>
</g>
<g id="star_2">
<radialGradient id="SVGID_9_" cx="372.6289" cy="-242.5107" r="29.999" gradientTransform="matrix(0.4687 0 0 0.4687 -81.451 159.046)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="0.12" style="stop-color:#FFFFFF;stop-opacity:0.7"/>
<stop offset="0.14" style="stop-color:#FFFFFF;stop-opacity:0.66"/>
<stop offset="0.24" style="stop-color:#FFFFFF;stop-opacity:0.49"/>
<stop offset="0.35" style="stop-color:#FFFFFF;stop-opacity:0.34"/>
<stop offset="0.46" style="stop-color:#FFFFFF;stop-opacity:0.21"/>
<stop offset="0.58" style="stop-color:#FFFFFF;stop-opacity:0.12"/>
<stop offset="0.7" style="stop-color:#FFFFFF;stop-opacity:0.05"/>
<stop offset="0.84" style="stop-color:#FFFFFF;stop-opacity:0.01"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
</radialGradient>
<circle fill="url(#SVGID_9_)" cx="93.394" cy="46.075" r="15.093"/>
<circle fill="#FFFFFF" cx="93.394" cy="46.075" r="3.094"/>
<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="26263.5977" y1="-8208.7705" x2="26263.5977" y2="-8171.7026" gradientTransform="matrix(-0.4687 0 0 -0.4687 12403.4668 -3792.7949)">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
<stop offset="0.18" style="stop-color:#FFFFFF;stop-opacity:0.73"/>
<stop offset="0.29" style="stop-color:#FFFFFF"/>
<stop offset="0.79" style="stop-color:#FFFFFF"/>
<stop offset="0.82" style="stop-color:#FFFFFF;stop-opacity:0.85"/>
<stop offset="0.86" style="stop-color:#FFFFFF;stop-opacity:0.66"/>
<stop offset="0.9" style="stop-color:#FFFFFF;stop-opacity:0.5"/>
<stop offset="0.94" style="stop-color:#FFFFFF;stop-opacity:0.39"/>
<stop offset="0.98" style="stop-color:#FFFFFF;stop-opacity:0.32"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
</linearGradient>
<path opacity="0.46" fill="url(#SVGID_10_)" enable-background="new " d="M92.503,53.902V38.247
c0-0.469,0.375-0.843,0.844-0.843l0,0c0.469,0,0.844,0.375,0.844,0.843v15.655c0,0.469-0.375,0.844-0.844,0.844l0,0
C92.925,54.746,92.503,54.371,92.503,53.902z"/>
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="26248.8008" y1="-8190.2148" x2="26278.2363" y2="-8190.2148" gradientTransform="matrix(-0.4687 0 0 -0.4687 12403.4668 -3792.7949)">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
<stop offset="0.18" style="stop-color:#FFFFFF;stop-opacity:0.73"/>
<stop offset="0.29" style="stop-color:#FFFFFF"/>
<stop offset="0.79" style="stop-color:#FFFFFF"/>
<stop offset="0.82" style="stop-color:#FFFFFF;stop-opacity:0.85"/>
<stop offset="0.86" style="stop-color:#FFFFFF;stop-opacity:0.66"/>
<stop offset="0.9" style="stop-color:#FFFFFF;stop-opacity:0.5"/>
<stop offset="0.94" style="stop-color:#FFFFFF;stop-opacity:0.39"/>
<stop offset="0.98" style="stop-color:#FFFFFF;stop-opacity:0.32"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
</linearGradient>
<path opacity="0.46" fill="url(#SVGID_11_)" enable-background="new " d="M86.504,46.075L86.504,46.075
c0,0.516,0.422,0.938,0.938,0.938h11.905c0.516,0,0.938-0.422,0.938-0.938l0,0c0-0.516-0.422-0.938-0.938-0.938H87.441
C86.879,45.137,86.504,45.559,86.504,46.075z"/>
</g>
<g id="white_star_1">
<radialGradient id="SVGID_12_" cx="254.1348" cy="-194.5132" r="31.4989" gradientTransform="matrix(0.4687 0 0 0.4687 -81.451 159.046)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="0.12" style="stop-color:#FFFFFF;stop-opacity:0.7"/>
<stop offset="0.14" style="stop-color:#FFFFFF;stop-opacity:0.66"/>
<stop offset="0.24" style="stop-color:#FFFFFF;stop-opacity:0.49"/>
<stop offset="0.35" style="stop-color:#FFFFFF;stop-opacity:0.34"/>
<stop offset="0.46" style="stop-color:#FFFFFF;stop-opacity:0.21"/>
<stop offset="0.58" style="stop-color:#FFFFFF;stop-opacity:0.12"/>
<stop offset="0.7" style="stop-color:#FFFFFF;stop-opacity:0.05"/>
<stop offset="0.84" style="stop-color:#FFFFFF;stop-opacity:0.01"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
</radialGradient>
<circle fill="url(#SVGID_12_)" cx="38.086" cy="68.573" r="15.093"/>
<circle fill="#FFFFFF" cx="38.086" cy="68.573" r="3.093"/>
<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="26381.5977" y1="-8256.7705" x2="26381.5977" y2="-8219.7031" gradientTransform="matrix(-0.4687 0 0 -0.4687 12403.4668 -3792.7949)">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
<stop offset="0.18" style="stop-color:#FFFFFF;stop-opacity:0.73"/>
<stop offset="0.29" style="stop-color:#FFFFFF"/>
<stop offset="0.79" style="stop-color:#FFFFFF"/>
<stop offset="0.82" style="stop-color:#FFFFFF;stop-opacity:0.85"/>
<stop offset="0.86" style="stop-color:#FFFFFF;stop-opacity:0.66"/>
<stop offset="0.9" style="stop-color:#FFFFFF;stop-opacity:0.5"/>
<stop offset="0.94" style="stop-color:#FFFFFF;stop-opacity:0.39"/>
<stop offset="0.98" style="stop-color:#FFFFFF;stop-opacity:0.32"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
</linearGradient>
<path opacity="0.46" fill="url(#SVGID_13_)" enable-background="new " d="M37.195,76.4V60.746c0-0.469,0.375-0.844,0.844-0.844
l0,0c0.469,0,0.844,0.375,0.844,0.844V76.4c0,0.469-0.375,0.844-0.844,0.844l0,0C37.617,77.244,37.195,76.869,37.195,76.4z"/>
<linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="26366.8008" y1="-8238.2158" x2="26396.2402" y2="-8238.2158" gradientTransform="matrix(-0.4687 0 0 -0.4687 12403.4668 -3792.7949)">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
<stop offset="0.18" style="stop-color:#FFFFFF;stop-opacity:0.73"/>
<stop offset="0.29" style="stop-color:#FFFFFF"/>
<stop offset="0.79" style="stop-color:#FFFFFF"/>
<stop offset="0.82" style="stop-color:#FFFFFF;stop-opacity:0.85"/>
<stop offset="0.86" style="stop-color:#FFFFFF;stop-opacity:0.66"/>
<stop offset="0.9" style="stop-color:#FFFFFF;stop-opacity:0.5"/>
<stop offset="0.94" style="stop-color:#FFFFFF;stop-opacity:0.39"/>
<stop offset="0.98" style="stop-color:#FFFFFF;stop-opacity:0.32"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
</linearGradient>
<path opacity="0.46" fill="url(#SVGID_14_)" enable-background="new " d="M31.196,68.573L31.196,68.573
c0,0.516,0.422,0.938,0.938,0.938h11.905c0.516,0,0.938-0.422,0.938-0.938l0,0c0-0.516-0.422-0.938-0.938-0.938H32.133
C31.571,67.636,31.196,68.058,31.196,68.573z"/>
</g>
<g id="star_5">
<radialGradient id="SVGID_15_" cx="737.1104" cy="-194.5132" r="29.9989" gradientTransform="matrix(0.4687 0 0 0.4687 -81.451 159.046)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="0.12" style="stop-color:#FFFFFF;stop-opacity:0.7"/>
<stop offset="0.14" style="stop-color:#FFFFFF;stop-opacity:0.66"/>
<stop offset="0.24" style="stop-color:#FFFFFF;stop-opacity:0.49"/>
<stop offset="0.35" style="stop-color:#FFFFFF;stop-opacity:0.34"/>
<stop offset="0.46" style="stop-color:#FFFFFF;stop-opacity:0.21"/>
<stop offset="0.58" style="stop-color:#FFFFFF;stop-opacity:0.12"/>
<stop offset="0.7" style="stop-color:#FFFFFF;stop-opacity:0.05"/>
<stop offset="0.84" style="stop-color:#FFFFFF;stop-opacity:0.01"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
</radialGradient>
<circle fill="url(#SVGID_15_)" cx="264.756" cy="68.573" r="15.093"/>
<circle fill="#FFFFFF" cx="264.756" cy="68.573" r="3.093"/>
<linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="25897.8984" y1="-8256.7705" x2="25897.8984" y2="-8219.7031" gradientTransform="matrix(-0.4687 0 0 -0.4687 12403.4668 -3792.7949)">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
<stop offset="0.18" style="stop-color:#FFFFFF;stop-opacity:0.73"/>
<stop offset="0.29" style="stop-color:#FFFFFF"/>
<stop offset="0.79" style="stop-color:#FFFFFF"/>
<stop offset="0.82" style="stop-color:#FFFFFF;stop-opacity:0.85"/>
<stop offset="0.86" style="stop-color:#FFFFFF;stop-opacity:0.66"/>
<stop offset="0.9" style="stop-color:#FFFFFF;stop-opacity:0.5"/>
<stop offset="0.94" style="stop-color:#FFFFFF;stop-opacity:0.39"/>
<stop offset="0.98" style="stop-color:#FFFFFF;stop-opacity:0.32"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
</linearGradient>
<path opacity="0.46" fill="url(#SVGID_16_)" enable-background="new " d="M263.912,76.4V60.746
c0-0.469,0.375-0.844,0.844-0.844l0,0c0.469,0,0.844,0.375,0.844,0.844V76.4c0,0.469-0.375,0.844-0.844,0.844l0,0
C264.287,77.244,263.912,76.869,263.912,76.4z"/>
<linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="25883.1992" y1="-8238.2158" x2="25912.6348" y2="-8238.2158" gradientTransform="matrix(-0.4687 0 0 -0.4687 12403.4668 -3792.7949)">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
<stop offset="0.18" style="stop-color:#FFFFFF;stop-opacity:0.73"/>
<stop offset="0.29" style="stop-color:#FFFFFF"/>
<stop offset="0.79" style="stop-color:#FFFFFF"/>
<stop offset="0.82" style="stop-color:#FFFFFF;stop-opacity:0.85"/>
<stop offset="0.86" style="stop-color:#FFFFFF;stop-opacity:0.66"/>
<stop offset="0.9" style="stop-color:#FFFFFF;stop-opacity:0.5"/>
<stop offset="0.94" style="stop-color:#FFFFFF;stop-opacity:0.39"/>
<stop offset="0.98" style="stop-color:#FFFFFF;stop-opacity:0.32"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
</linearGradient>
<path opacity="0.46" fill="url(#SVGID_17_)" enable-background="new " d="M257.866,68.573L257.866,68.573
c0,0.516,0.422,0.938,0.938,0.938h11.905c0.516,0,0.938-0.422,0.938-0.938l0,0c0-0.516-0.422-0.938-0.938-0.938h-11.905
C258.288,67.636,257.866,68.058,257.866,68.573z"/>
</g>
</g>
每个径向和线性渐变元素中的停止偏移是相同的,但是当我将它们添加为def并通过url#引用它们时,定位关闭。我试过了:
<defs>
<linearGradient id="linearGradientOne" gradientUnits="userSpaceOnUse" x1="-7694.9893" y1="8409.7441" x2="-7694.9893" y2="7886.7349" gradientTransform="matrix(0.4687 0 0 0.4687 3758.0625 -3681.2319)">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
<stop offset="0.01" style="stop-color:#FFFFFF;stop-opacity:0.38"/>
<stop offset="0.06" style="stop-color:#FFFFFF;stop-opacity:0.27"/>
<stop offset="0.11" style="stop-color:#FFFFFF;stop-opacity:0.17"/>
<stop offset="0.17" style="stop-color:#FFFFFF;stop-opacity:0.09"/>
<stop offset="0.24" style="stop-color:#FFFFFF;stop-opacity:0.04"/>
<stop offset="0.33" style="stop-color:#FFFFFF;stop-opacity:0.01"/>
<stop offset="0.5" style="stop-color:#FFFFFF;stop-opacity:0"/>
<stop offset="0.76" style="stop-color:#FFFFFF;stop-opacity:0.01"/>
<stop offset="0.85" style="stop-color:#FFFFFF;stop-opacity:0.03"/>
<stop offset="0.92" style="stop-color:#FFFFFF;stop-opacity:0.08"/>
<stop offset="0.97" style="stop-color:#FFFFFF;stop-opacity:0.15"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0.2"/>
</linearGradient>
</defs>
<path opacity="0.46" fill="url(#linearGradientOne)" enable-background="new" d="M150.53,45.372V29.717
c0-0.469,0.375-0.844,0.844-0.844l0,0c0.469,0,0.844,0.375,0.844,0.844v15.655c0,0.469-0.375,0.844-0.844,0.844l0,0
C150.952,46.215,150.577,45.84,150.53,45.372z"/>
但定位是我不太了解的。我搜索了Google和Stack Overflow,发现了类似的问题,但没有一个能帮助我理解如何减少代码并优化SVG。
谢谢!