圣诞树动画

Question

Air

Asked:2020-12-07 02:33:22 +0000 UTC2020-12-07 02:33:22 +0000 UTC 2020-12-07 02:33:22 +0000 UTC

如何将 CSS 加载器转换为 SVG 加载器？

772

同事们，请帮我把这个例子翻译成css完整SVG的，因为我不仅想在整个页面上使用它，而且还想在较小的滑块类型对象上使用它......

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #2b2b2b;
}

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.wrap {
  position: absolute;
  left: calc(50% - 150px);
  top: calc(50% - 150px);
  width: 300px;
  height: 300px;
}

.border-wrap {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid #6fba82;
  border-top: 3px solid #f79533;
  border-bottom: 3px solid #ef4e7b;
  border-right: none;
  box-shadow: 
  inset 1px 8px 2px 5px #f79533, 
  2px 7px 2px 5px #f37055, 
  inset 3px 6px 2px 5px #ef4e7b, 
  4px 5px 2px 5px #a166ab, 
  inset 5px 4px 2px 5px #5073b8, 
  6px 3px 2px 5px #1098ad, 
  inset 7px 2px 2px 5px #07b39b, 
  8px 1px 2px 5px #6fba82;
  animation: main-rotate 3s infinite linear;
}

@keyframes main-rotate {
  from {
    transform: rotateZ(0);
    box-shadow: 
    inset 1px 8px 2px 5px #f79533, 
    2px 7px 2px 5px #f37055, 
    inset 3px 6px 4px 5px #ef4e7b, 
    4px 5px 2px 5px #a166ab, 
    inset 5px 4px 6px 5px #5073b8, 
    6px 3px 2px 5px #1098ad, 
    inset 7px 2px 8px 5px #07b39b,
    8px 1px 2px 5px #6fba82;
  }
  50% {
    box-shadow: 
    inset 1px 8px 6px 5px #ADFF2F, 
    2px 7px 2px 5px #7FFF00, 
    inset 3px 6px 6px 5px #7CFC00, 
    4px 5px 2px 5px #00FF00, 
    inset 5px 4px 4px 5px #32CD32, 
    6px 3px 2px 5px #98FB98, 
    inset 7px 2px 2px 5px #90EE90, 
    8px 1px 2px 5px #00FA9A;
  }
  from {
    transform: rotateZ(360deg);
    box-shadow: 
    inset 1px 8px 2px 5px #f79533, 
    2px 7px 2px 5px #f37055, 
    inset 3px 6px 4px 5px #ef4e7b, 
    4px 5px 2px 5px #a166ab, 
    inset 5px 4px 6px 5px #5073b8, 
    6px 3px 2px 5px #1098ad, 
    inset 7px 2px 8px 5px #07b39b, 
    8px 1px 2px 5px #6fba82;
  }
}

<div class="wrapper">
  <div class="wrap">
    <div class="border-wrap">
    </div>
  </div>
</div>

3 个回答

Voted

Alexandr_TT · Answer 1 · 2020-12-07T22:59:29Z

形状将具有复杂的轮廓，因此，为了避免在旋转 SVG 元素时出现不可预测的行为，立即明确定义旋转中心非常重要。

在矢量编辑器中工作

要设置/确定形状的中心，让我们采取几个简单的步骤：

创建具有两种形状的 SVG 文件：矩形和内切圆

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
     width="300" height="300" viewBox="0 0 300 300">  

<rect x="30" y="30" width="240" height="240" stroke="black" fill="none" />
<circle cx="150" cy="150"  r="90" stroke="black" fill="none" />
</svg>

将此文件加载到矢量编辑器中

旋转中心将150 Х 150px

要将矩形的轮廓转换为所需的形状，请在矢量编辑器的菜单中选择Контур / Оконтурить объект shift+Contrl+C

沿轴再添加 4 个节点
选择图的所有节点并选择——Сделать выделенные узлы автоматически сглаженными
结果就是这样的图

通过拖动锚点并使用它们的杠杆，我们实现了所需的形状

拖动时，必须注意不要移动整个图形。图为中心一直在原地150 Х 150

我们保存文件。取补丁公式<path>d="M.... />

创建预加载器代码

绕圈一圈

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
         width="600" height="600" viewBox="0 0 300 300">  

    <path id="path1" fill="yellowgreen"  d="M71.9 78.4C90.8 58.1 122.9 50.7 150.6 51.5c26.2 0.7 54.9 10.5 72.8 29.7 16.9 18.1 22.9 45.8 23.4 70.6 0.5 25.1-3.2 54.4-20.7 72.4-18.5 19.1-49.4 24.5-76 24.3-25.4-0.2-54.4-6.3-72.4-24.3C59.5 205.8 53.9 176.5 53 150.8 52.2 125.9 55 96.7 71.9 78.4Z"/>
    <circle cx="150" cy="150"  r="90" stroke="none" fill="black" />
    </svg>

我们给出一个旋转命令values="0 150 150;360 150 150"——从 0 到 360 度。中心 150 X 150

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
         width="600" height="600" viewBox="0 0 300 300">  

    <path id="path1" fill="yellowgreen"  d="M71.9 78.4C90.8 58.1 122.9 50.7 150.6 51.5c26.2 0.7 54.9 10.5 72.8 29.7 16.9 18.1 22.9 45.8 23.4 70.6 0.5 25.1-3.2 54.4-20.7 72.4-18.5 19.1-49.4 24.5-76 24.3-25.4-0.2-54.4-6.3-72.4-24.3C59.5 205.8 53.9 176.5 53 150.8 52.2 125.9 55 96.7 71.9 78.4Z">
	 <animateTransform attributeName="transform" type="rotate" values="0 150 150;360 150 150" dur="6s"/> 
	 </path> 
    <circle cx="150" cy="150"  r="90" stroke="none" fill="black" />
    </svg>

添加从第一个环的副本获得的第二个环，然后先将其旋转 45 度。

<path id="path2" transform="rotate(45 150 150)" fill="dodgerblue"

两个圆环的动画同时开始，但旋转方向不同

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
         width="600" height="600" viewBox="0 0 300 300">  

    <path id="path1" fill="yellowgreen"  d="M71.9 78.4C90.8 58.1 122.9 50.7 150.6 51.5c26.2 0.7 54.9 10.5 72.8 29.7 16.9 18.1 22.9 45.8 23.4 70.6 0.5 25.1-3.2 54.4-20.7 72.4-18.5 19.1-49.4 24.5-76 24.3-25.4-0.2-54.4-6.3-72.4-24.3C59.5 205.8 53.9 176.5 53 150.8 52.2 125.9 55 96.7 71.9 78.4Z">
	 <animateTransform attributeName="transform" type="rotate" values="0 150 150;360 150 150" dur="6s"/> 
	 </path>  
	 
	 <path id="path2" transform="rotate(45 150 150)" fill="dodgerblue" fill-opacity="1" d="M71.9 78.4C90.8 58.1 122.9 50.7 150.6 51.5c26.2 0.7 54.9 10.5 72.8 29.7 16.9 18.1 22.9 45.8 23.4 70.6 0.5 25.1-3.2 54.4-20.7 72.4-18.5 19.1-49.4 24.5-76 24.3-25.4-0.2-54.4-6.3-72.4-24.3C59.5 205.8 53.9 176.5 53 150.8 52.2 125.9 55 96.7 71.9 78.4Z">
	 <animateTransform attributeName="transform" type="rotate" values="360 150 150;0 150 150" dur="6s"/> 
	 </path> 
   
   <circle cx="150" cy="150"  r="90" stroke="none" fill="black" />
    </svg>

为每个环添加渐变、透明度

svg {
background:black;
}

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600" height="600" viewBox="0 0 300 300" > 
<defs>
        <linearGradient id="gradl" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="dodgerblue"/>   
            <stop offset="100%" stop-color="yellow"/>   
        </linearGradient> 
		<linearGradient id="grad2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="lime"/>   
            <stop offset="100%" stop-color="purple"/>   
        </linearGradient>
		</defs>
<path id="path1" d="M71.9 78.4C90.8 58.1 122.9 50.7 150.6 51.5c26.2 0.7 54.9 10.5 72.8 29.7 16.9 18.1 22.9 45.8 23.4 70.6 0.5 25.1-3.2 54.4-20.7 72.4-18.5 19.1-49.4 24.5-76 24.3-25.4-0.2-54.4-6.3-72.4-24.3C59.5 205.8 53.9 176.5 53 150.8 52.2 125.9 55 96.7 71.9 78.4Z"  fill="url(#gradl)" stroke="none" fill-opacity="0.5" > 
 <animateTransform attributeName="transform" type="rotate" values="0 150 150;360 150 150" dur="12s" /> 
</path>

<path id="path2" transform="rotate(45 150 150)" d="M71.9 78.4C90.8 58.1 122.9 50.7 150.6 51.5c26.2 0.7 54.9 10.5 72.8 29.7 16.9 18.1 22.9 45.8 23.4 70.6 0.5 25.1-3.2 54.4-20.7 72.4-18.5 19.1-49.4 24.5-76 24.3-25.4-0.2-54.4-6.3-72.4-24.3C59.5 205.8 53.9 176.5 53 150.8 52.2 125.9 55 96.7 71.9 78.4Z" fill="url(#grad2)"troke="none"; fill-opacity="0.5">
 <animateTransform attributeName="transform" type="rotate" values="360 148 148;0 148 148" dur="12s" />  
</path>
<circle cx="150" cy="150" r="90" stroke="none" fill="black"/>
</svg>

Alexandr_TT · Answer 2 · 2020-12-07T23:01:27Z

附加效果

加载器环渐变动画

让我们为线性渐变属性设置动画stop-color

<linearGradient id="gradl" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="dodgerblue"/>   
            <stop offset="100%" stop-color="yellow"/>   
        </linearGradient>

svg {
background:black;
}

<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600" height="600" viewBox="0 0 300 300" > 
<defs>
        <linearGradient id="gradl" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="dodgerblue"> 
             <animate attributeName="stop-color"
               dur="1.5s"
               values="dodgerblue;yellow;dodgerblue"
               repeatCount="indefinite"  />	
          </stop>			 
            <stop offset="100%" stop-color="yellow">
           <animate
             attributeName="stop-color"
             dur="1.5s"
             values="yellow;dodgerblue;yellow"
             repeatCount="indefinite"  />	
             </stop>			 			
			
        </linearGradient> 
		
	
    	</defs>
<path id="path1" d="M71.9 78.4C90.8 58.1 122.9 50.7 150.6 51.5c26.2 0.7 54.9 10.5 72.8 29.7 16.9 18.1 22.9 45.8 23.4 70.6 0.5 25.1-3.2 54.4-20.7 72.4-18.5 19.1-49.4 24.5-76 24.3-25.4-0.2-54.4-6.3-72.4-24.3C59.5 205.8 53.9 176.5 53 150.8 52.2 125.9 55 96.7 71.9 78.4Z"  fill="url(#gradl)" stroke="none" fill-opacity="1" > 
 
</path>

<circle cx="150" cy="150" r="90" stroke="none" fill="black"/>
</svg>

同样，我们制作第二个圆环渐变的动画

svg {
background:black;
}

<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600" height="600" viewBox="0 0 300 300" > 
<defs>
        <linearGradient id="gradl" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="dodgerblue"> 
             <animate attributeName="stop-color" dur="1.5s" values="dodgerblue;yellow;dodgerblue" repeatCount="indefinite"  />	
             </stop>			 
            <stop offset="100%" stop-color="yellow">
           <animate attributeName="stop-color" dur="1.5s" values="yellow;dodgerblue;yellow" repeatCount="indefinite"  />	
             </stop>			 			
			
        </linearGradient> 
		<linearGradient id="grad2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="lime">
              <animate
                attributeName="stop-color"
                dur="1.5s"
                values="lime;purple;lime"
                repeatCount="indefinite"  />	
             </stop>				
            <stop offset="100%" stop-color="purple">
           <animate
             attributeName="stop-color"
             dur="1.5s"
             values="purple;lime;purple"
             repeatCount="indefinite"  />	
             </stop>				
        </linearGradient>
	
    	</defs>
<path id="path1" d="M71.9 78.4C90.8 58.1 122.9 50.7 150.6 51.5c26.2 0.7 54.9 10.5 72.8 29.7 16.9 18.1 22.9 45.8 23.4 70.6 0.5 25.1-3.2 54.4-20.7 72.4-18.5 19.1-49.4 24.5-76 24.3-25.4-0.2-54.4-6.3-72.4-24.3C59.5 205.8 53.9 176.5 53 150.8 52.2 125.9 55 96.7 71.9 78.4Z"  fill="url(#gradl)" stroke="none" fill-opacity="1" > 
 
</path>

<path id="path2" transform="rotate(45 150 150)" d="M71.9 78.4C90.8 58.1 122.9 50.7 150.6 51.5c26.2 0.7 54.9 10.5 72.8 29.7 16.9 18.1 22.9 45.8 23.4 70.6 0.5 25.1-3.2 54.4-20.7 72.4-18.5 19.1-49.4 24.5-76 24.3-25.4-0.2-54.4-6.3-72.4-24.3C59.5 205.8 53.9 176.5 53 150.8 52.2 125.9 55 96.7 71.9 78.4Z" fill="url(#grad2)"troke="none"; fill-opacity="0.8">
  
</path>
<circle cx="150" cy="150" r="90" stroke="none" fill="black"/>
</svg>

为渐变动画添加环形旋转

svg {
background:black;
}

<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600" height="600" viewBox="0 0 300 300" > 
<defs>
        <linearGradient id="gradl" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="dodgerblue"> 
             <animate
                attributeName="stop-color"
                dur="1.5s"
                values="dodgerblue;yellow;dodgerblue"
                repeatCount="indefinite"  />	
             </stop>			 
            <stop offset="100%" stop-color="yellow">
           <animate
             attributeName="stop-color"
             dur="1.5s"
             values="yellow;dodgerblue;yellow"
             repeatCount="indefinite"  />	
             </stop>			 			
			
        </linearGradient> 
		<linearGradient id="grad2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="lime">
              <animate
                attributeName="stop-color"
                dur="1.5s"
                values="lime;purple;lime"
                repeatCount="indefinite"  />	
             </stop>				
            <stop offset="100%" stop-color="purple">
           <animate
             attributeName="stop-color"
             dur="1.5s"
             values="purple;lime;purple"
             repeatCount="indefinite"  />	
             </stop>				
        </linearGradient>
	
    	</defs>
<path id="path1" d="M71.9 78.4C90.8 58.1 122.9 50.7 150.6 51.5c26.2 0.7 54.9 10.5 72.8 29.7 16.9 18.1 22.9 45.8 23.4 70.6 0.5 25.1-3.2 54.4-20.7 72.4-18.5 19.1-49.4 24.5-76 24.3-25.4-0.2-54.4-6.3-72.4-24.3C59.5 205.8 53.9 176.5 53 150.8 52.2 125.9 55 96.7 71.9 78.4Z"  fill="url(#gradl)" stroke="none" fill-opacity="1" > 
 <animateTransform attributeName="transform" type="rotate" values="0 150 150;360 150 150"  dur="6s" repeatCount="indefinite" /> 
</path>

<path id="path2" transform="rotate(45 150 150)" d="M71.9 78.4C90.8 58.1 122.9 50.7 150.6 51.5c26.2 0.7 54.9 10.5 72.8 29.7 16.9 18.1 22.9 45.8 23.4 70.6 0.5 25.1-3.2 54.4-20.7 72.4-18.5 19.1-49.4 24.5-76 24.3-25.4-0.2-54.4-6.3-72.4-24.3C59.5 205.8 53.9 176.5 53 150.8 52.2 125.9 55 96.7 71.9 78.4Z" fill="url(#grad2)"troke="none"; fill-opacity="0.8">
 <animateTransform
   attributeName="transform"
   type="rotate"
   values="360 148 148;0 148 148"
   dur="6s"
   repeatCount="indefinite" />  
</path>
<circle cx="150" cy="150" r="90" stroke="none" fill="black"/>
</svg>

添加文本并对其应用渐变。

如果你在布局中实际应用这个例子，那么你可以制作一个加载器静态闪烁的画廊，点击后会出现文本、照片等，这些画廊将被旋转的圆环包围。

在 SVG 内单击时开始动画。

.container {
width:50%;
height:50%;
}

svg {
background:black;
}

#path1 {
fill:url(#gradl);
stroke:none;
fill-opacity:1;
}
#path2 {
fill:url(#grad2);
stroke:none;
fill-opacity:0.8;
}
#crc1 {
stroke:none;
fill:black;
}
#txt1 {
fill:url(#grad2);

}

<div class="container">
 
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  viewBox="0 0 300 300" > 
<defs>
        <linearGradient id="gradl" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="dodgerblue"> 
             <animate
               attributeName="stop-color"
               dur="1.5s"
               values="dodgerblue;yellow;dodgerblue"
               repeatCount="indefinite"  />	
             </stop>			 
            <stop offset="100%" stop-color="yellow">
           <animate
             attributeName="stop-color"
             dur="1.5s"
             values="yellow;dodgerblue;yellow"
             repeatCount="indefinite"  />	
             </stop>			 			
			
        </linearGradient> 
		<linearGradient id="grad2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="lime">
              <animate
                attributeName="stop-color"
                dur="1.5s"
                values="lime;purple;lime"
                repeatCount="indefinite"  />	
             </stop>				
            <stop offset="100%" stop-color="purple">
           <animate
            attributeName="stop-color"
            dur="1.5s"
            values="purple;lime;purple"
            repeatCount="indefinite"  />	
             </stop>				
        </linearGradient>
	
    	</defs>
<path id="path1" d="M71.9 78.4C90.8 58.1 122.9 50.7 150.6 51.5c26.2 0.7 54.9 10.5 72.8 29.7 16.9 18.1 22.9 45.8 23.4 70.6 0.5 25.1-3.2 54.4-20.7 72.4-18.5 19.1-49.4 24.5-76 24.3-25.4-0.2-54.4-6.3-72.4-24.3C59.5 205.8 53.9 176.5 53 150.8 52.2 125.9 55 96.7 71.9 78.4Z" > 
 <animateTransform attributeName="transform" type="rotate" values="0 150 150;360 150 150" begin="svg1.click" dur="10s" /> 
</path>

<path id="path2" transform="rotate(45 150 150)" d="M71.9 78.4C90.8 58.1 122.9 50.7 150.6 51.5c26.2 0.7 54.9 10.5 72.8 29.7 16.9 18.1 22.9 45.8 23.4 70.6 0.5 25.1-3.2 54.4-20.7 72.4-18.5 19.1-49.4 24.5-76 24.3-25.4-0.2-54.4-6.3-72.4-24.3C59.5 205.8 53.9 176.5 53 150.8 52.2 125.9 55 96.7 71.9 78.4Z" >
 <animateTransform attributeName="transform" type="rotate" values="360 148 148;0 148 148" begin="svg1.click" dur="10s" />  
</path>
<circle id="crc1" cx="150" cy="150" r="90" /> 
 <text id="txt1" x="80" y="160" font-size="36" font-weight="700" > Click me </text>
</svg>  
</div>

Alexandr_TT · Answer 3 · 2020-12-08T02:50:42Z

许多人被非常长的 SVG 代码行吓倒了。
从 CSS 属性格式（每一行都有一个属性）转变在心理上是很困难的。我会尽量写SVG规则风格的属性、命令，CSS 同时我会改变预加载器的配色方案：

.container {
width:50%;
height:50%;
}

svg {
background:black;
}

#path1 {
fill:url(#gradl);
stroke:none;
fill-opacity:1;
}
#path2 {
fill:url(#grad2);
stroke:none;
fill-opacity:0.6;
}
#crc1 {
stroke:none;
fill:black;
}
#txt1 {
fill:url(#grad2);

}

<div class="container">
 
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  viewBox="0 0 300 300" > 
<defs>
        <linearGradient id="gradl" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="red" stop-opacity="o.5"> 
			  <animate 
				 attributeName="stop-color" 
				 dur="1.5s" 
				 values="red;yellow;red"
				 repeatCount="indefinite" 
			  />	
            </stop>			 
          <stop offset="100%" stop-color="yellow">
           <animate  
		     attributeName="stop-color" 
			 dur="1.5s" 
			 values="yellow;red;yellow" repeatCount="indefinite" 
    		 />	
           </stop>			 			
			
        </linearGradient> 
		
		  <linearGradient id="grad2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="lime"> 
			  <animate 
				 attributeName="stop-color" 
				 dur="1.5s" 
				 values="lime;purple;lime"
				 repeatCount="indefinite" 
			  />	
            </stop>			 
          <stop offset="100%" stop-color="purple">
           <animate  
		     attributeName="stop-color" 
			 dur="1.5s" 
			 values="purple;lime;purple" repeatCount="indefinite" 
    		 />	
           </stop>			 			
			
        </linearGradient> 
		
	</defs>
<path id="path1" d="M71.9 78.4C90.8 58.1 122.9 50.7 150.6 51.5c26.2 0.7 54.9 10.5 72.8 29.7 16.9 18.1 22.9 45.8 23.4 70.6 0.5 25.1-3.2 54.4-20.7 72.4-18.5 19.1-49.4 24.5-76 24.3-25.4-0.2-54.4-6.3-72.4-24.3C59.5 205.8 53.9 176.5 53 150.8 52.2 125.9 55 96.7 71.9 78.4Z" > 
 <animateTransform 
  attributeName="transform" 
   type="rotate" 
    values="0 150 150;360 150 150" 
	 begin="svg1.click" 
	  dur="10s" 
	  /> 
</path>

<path id="path2" transform="rotate(45 150 150)" 
  d="M71.9 78.4C90.8 58.1 122.9 50.7 150.6 51.5c26.2 0.7 54.9 10.5 72.8 29.7 16.9 18.1 22.9 45.8 23.4 70.6 0.5 25.1-3.2 54.4-20.7 72.4-18.5 19.1-49.4 24.5-76 24.3-25.4-0.2-54.4-6.3-72.4-24.3C59.5 205.8 53.9 176.5 53 150.8 52.2 125.9 55 96.7 71.9 78.4Z" >
 <animateTransform 
  attributeName="transform" 
   type="rotate" 
    values="360 148 148;0 148 148" 
 	begin="svg1.click" 
	 dur="10s" />  
</path>
<circle id="crc1" cx="150" cy="150" r="90" /> 
 <text id="txt1" x="80" y="160" font-size="36" font-weight="700" > Click me </text>
</svg>  
</div>

如何将 CSS 加载器转换为 SVG 加载器？

在矢量编辑器中工作

创建预加载器代码

附加效果

是否可以在 C++ 中继承类 <---> 结构？

这种神经网络架构适合文本分类吗？

为什么分配的工作方式不同？

控制台中的光标坐标

如何在 C++ 中删除类的实例？

点是否属于线段的问题

json结构错误

ServiceWorker 中的“获取”事件

c ++控制台应用程序exe文件[重复]

按多列从sql表中选择

如何将 CSS 加载器转换为 SVG 加载器？

3 个回答

在矢量编辑器中工作

创建预加载器代码

附加效果

相关问题