英文:
Rotating a group in an SVG that has a gradient file without rotating the gradient itself?
问题
我在SO上找到了很多关于旋转渐变的信息。我的问题是相反的。
我有一个由几条路径制成的图标，我想要用垂直渐变来填充。我知道如何做到这一点，而且它也正常工作。
然而，现在我需要旋转一个路径/组，但我仍然希望图标的整体渐变从上到下保持不变。所以，在我的测试中，半圆旋转，从底部的蓝色到顶部的红色。
这是一个简单的例子，但想法是在我的艺术中旋转或移动路径和/或组，同时在整个艺术作品上保持一个静态的渐变填充，就像我可以轻松地在非动画艺术作品中做的那样。
英文:
I find a lot of info on SO about rotating a gradient. My issue is the opposite.
I have an icon made out of a few paths that i want to fill with a vertical gradient. This I know how to do and it works fine.
However, now I need to rotate an path/group but I still want the overall gradient of te icon to remain static top to bottom. So, the semicircle in my test rotates, it travels from blue as it's at the bottom and red as it goes around the top.
This is a simplistic example, but the idea is to rotate or move paths and/or groups in my art whilst having a stationary gradient fill across the entire artwork, like I can easily do with non-animated artwork.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<style>
.spinner {
transform-origin: center;
animation: spinner_StKS 0.75s infinite linear;
}
.ring,
.bell {}
@keyframes spinner_StKS {
100% {
transform: rotate(360deg);
}
}
</style>
<linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0" stop-color="red" />
<stop offset="1" stop-color="blue" />
</linearGradient>
<g class="icon" fill="url(#gradient)">
<g id="bell" transform="translate(8.000000, 7.050223)" class="bell">
<path d="M15.8842999,14.4638359 C14.9360423,12.930403 14.4236902,11.1769083 14.4002435,9.38474047 L14.4002435,6.2627564 C14.4002435,2.80393155 11.5347569,1.77635684e-15 8,1.77635684e-15 C4.46524313,1.77635684e-15 1.59975652,2.80393155 1.59975652,6.2627564 L1.59975652,9.3800434 C1.5771244,11.1738044 1.06474385,12.9290182 0.115700067,14.4638359 C-0.0338774353,14.7055293 -0.0387448115,15.0073403 0.102964457,15.2535317 C0.244673725,15.4997232 0.510966493,15.6521939 0.799726089,15.6521939 L15.2002739,15.6521939 C15.4890335,15.6521939 15.7553263,15.4997232 15.8970355,15.2535317 C16.0387448,15.0073403 16.0338774,14.7055293 15.8842999,14.4638359 Z" id="Path"></path>
<path d="M8.80563065,17.8637298 C9.48463281,17.6269821 10.018941,17.1041517 10.260886,16.4397355 L5.73911399,16.4397355 C5.95277088,17.026486 6.39588476,17.5061499 6.97097137,17.7732021 C7.54605798,18.0402543 8.20600694,18.0728182 8.80563065,17.8637298 Z" id="Path"></path>
</g>
<path d="M16,4.42658222 C21.6727273,4.42658222 26.6181818,8.49003326 27.4909091,14.1498401 C27.6363636,15.1657028 28.5090909,16.0364423 29.6727273,16.0364423 L29.6727273,16.0364423 C30.8363636,16.0364423 31.8545455,15.0205796 31.8545455,13.8595936 C31.8545455,13.7144703 31.8545455,13.5693471 31.8545455,13.4242238 C30.4,4.71682872 22.2545455,-1.23322459 13.5272727,0.218007922 C6.69090909,1.37899393 1.30909091,6.60343099 0.290909091,13.4242238 C6.66133815e-16,14.7303331 0.872727273,15.7461958 2.03636364,16.0364423 C2.18181818,16.0364423 2.32727273,16.0364423 2.47272727,16.0364423 L2.47272727,16.0364423 C3.49090909,16.0364423 4.50909091,15.1657028 4.65454545,14.1498401 C5.38181818,8.49003326 10.3272727,4.42658222 16,4.42658222 Z" id="spinner" class="spinner"></path>
<path d="M16,0.0728846708 C7.12727273,0.0728846708 0,7.18392399 0,16.0364423 C0,24.8889607 7.12727273,32 16,32 C24.8727273,32 32,24.8889607 32,16.0364423 C32,7.18392399 24.8727273,0.0728846708 16,0.0728846708 Z M16,27.6463025 C9.6,27.6463025 4.36363636,22.4218654 4.36363636,16.0364423 C4.36363636,9.65101927 9.6,4.42658222 16,4.42658222 C22.4,4.42658222 27.6363636,9.65101927 27.6363636,16.0364423 C27.6363636,22.4218654 22.4,27.6463025 16,27.6463025 Z" id="circle" class="ring" opacity="0.25"></path>
</g>
</svg>
<!-- end snippet -->
答案1
得分: 0
以下是您要翻译的内容：
"Like commented you can use a mask. All shapes go into the mask and the mask is then applied to a rectangle that has the gradient fill.
I replaced the two paths that create the spinner with two circles. Makes the code shorter.
.spinner {
transform-origin: center;
animation: spinner_StKS 0.75s infinite linear;
}
.ring,
.bell {}
@keyframes spinner_StKS {
100% {
transform: rotate(360deg);
}
}
"
英文:
Like commented you can use a mask. All shapes go into the mask and the mask is then applied to a rectangle that has the gradient fill.
I replaced the two paths that create the spinner with two circles. Makes the code shorter.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.spinner {
transform-origin: center;
animation: spinner_StKS 0.75s infinite linear;
}
.ring,
.bell {}
@keyframes spinner_StKS {
100% {
transform: rotate(360deg);
}
}
<!-- language: lang-html -->
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0" stop-color="red" />
<stop offset="1" stop-color="blue" />
</linearGradient>
<mask id="m1">
<g id="bell" fill="white" transform="translate(8.000000, 7.050223)" class="bell">
<path d="M15.8842999,14.4638359 C14.9360423,12.930403 14.4236902,11.1769083 14.4002435,9.38474047 L14.4002435,6.2627564 C14.4002435,2.80393155 11.5347569,1.77635684e-15 8,1.77635684e-15 C4.46524313,1.77635684e-15 1.59975652,2.80393155 1.59975652,6.2627564 L1.59975652,9.3800434 C1.5771244,11.1738044 1.06474385,12.9290182 0.115700067,14.4638359 C-0.0338774353,14.7055293 -0.0387448115,15.0073403 0.102964457,15.2535317 C0.244673725,15.4997232 0.510966493,15.6521939 0.799726089,15.6521939 L15.2002739,15.6521939 C15.4890335,15.6521939 15.7553263,15.4997232 15.8970355,15.2535317 C16.0387448,15.0073403 16.0338774,14.7055293 15.8842999,14.4638359 Z" id="Path"></path>
<path d="M8.80563065,17.8637298 C9.48463281,17.6269821 10.018941,17.1041517 10.260886,16.4397355 L5.73911399,16.4397355 C5.95277088,17.026486 6.39588476,17.5061499 6.97097137,17.7732021 C7.54605798,18.0402543 8.20600694,18.0728182 8.80563065,17.8637298 Z" id="Path"></path>
</g>
<g stroke="white" stroke-width="4.6" fill="none">
<circle cx="16" cy="16" r="13.7" class="spinner"
stroke-dasharray="40 100" pathLength="100" stroke-linecap="round"/>
<circle cx="16" cy="16" r="13.7" opacity="0.25"/>
</g>
</mask>
</defs>
<rect width="32" height="32" fill="url(#gradient)" mask="url(#m1)" />
</svg>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论