圣诞树动画

Question

Alexandr_TT

Asked:2020-02-19 20:19:53 +0000 UTC2020-02-19 20:19:53 +0000 UTC 2020-02-19 20:19:53 +0000 UTC

如何使用 SVG 命令绘制汽车

772

下面是汽车的PNG图像。
我想制作汽车沿某个轨迹运动的动画。期望汽车的车轮旋转。我知道为此有必要将图像转换为 SVG 格式。

怎么做？

使用矢量编辑器，或手动使用 SVG 公式，或以其他方式，例如应用 CSS3 转换。

4 个回答

Voted

Alexandr_TT · Answer 1 · 2020-02-19T20:27:13Z

汽车沿给定轨迹运动的动画

首先我们需要画一条路径。为此，请在矢量编辑器中打开svg汽车文件。

画出路径
保存文件
要从矢量编辑器保存的 SVG 文件中删除不必要的信息，您需要使用任何优化器优化文件，例如 - SVG EDITOR
Path从轨迹文件复制

要沿给定路径制作动画，请使用以下命令：

<animateMotion xlink:href="#car-dodger" begin="0s" dur="12s" rotate="auto" repeatCount="1" fill="freeze" > <mpath xlink:href="#carPath" /> </animateMotion> ，在哪里

#car-dodger" - 唯一的车辆标识符

#carPath" - 汽车移动路径的标识符

以下是完整代码：

<svg width="580" height="400" viewBox="0 0 580 400"
     xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>


</defs>	

<g id="car-dodger" transform="scale(0.25) translate(0 -180)">
    <!-- Top -->
      <rect x="70" y="10" width="220" height="130" fill="transparent" rx="150" stroke="dodgerblue" stroke-width="10" />
    <!-- Tail Lights red -->
	<circle r="10px" fill="crimson" cx="15" cy="90" />
	
    <!-- Body -->
      <rect x="10" y="70" width="340" height="80" fill="dodgerblue" rx="30" />
      
    <g>
    <!-- Left line -->
      <line x1="145" y1="10" x2="145" y2="80" stroke="dodgerblue" stroke-width="10"/>

    <!-- Right line -->
      <line x1="215" y1="10" x2="215" y2="80" stroke="dodgerblue" stroke-width="10"/>
    </g>
  
    <g>
    <!-- Left bumper -->
      <rect x="0" y="110" width="40" height="20" fill="#999" rx="10" />
    
    <!-- Right bumper -->
      <rect x="325" y="110" width="40" height="20" fill="#999" rx="10" />
    </g>  
  
    <!-- Left wheel  -->
    <g stroke-dasharray="6.28 6.28">
      <circle r="40px" fill="#222" stroke="white" stroke-width="4" cx="90" cy="140"/>    
      <circle r="22px" fill="#5C5C5C" cx="90" cy="140"/> 
	   <polyline points="90,140 97.5 147.5" stroke="white" stroke-width="6" stroke-linecap="round" />
      <animateTransform attributeName="transform" type="rotate" values="0 90 140;360 90 140"  dur="2s" repeatCount="indefinite" />
	</g>
  
    <!-- Right wheel -->
    <g stroke-dasharray="6.28 6.28">
      <circle r="40px" fill="#222" stroke="white" stroke-width="4" cx="270" cy="140"/>
      <circle r="22px" fill="#5C5C5C" cx="270" cy="140"/> 
	  <polyline points="270,140 277.5 147.5" stroke="white" stroke-width="6" stroke-linecap="round" />
	  <animateTransform 
      attributeName="transform"
      type="rotate"
      values="0 270 140;360 270 140"
      dur="2s"
      repeatCount="indefinite" />
    </g>  

    <g>
    <!-- Gold light -->
      <circle r="15px" fill="gold" cx="340" cy="90"/>
      
       </g>  
	</g>
 <path id="carPath"
     style="fill:none;stroke:grey;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;"
     d="m 7.00611,78.668024 c 135.65342,-0.380598 152.27447,-3.422932 228.39919,-5.604887 28.49512,-0.816753 57.35177,-7.465997 85.47454,-2.802445 80.78801,13.39694 153.5049,57.123848 229.8004,86.875768 23.91885,9.32731 71.46232,28.72505 71.46232,28.72505" />	
	<animateMotion
     xlink:href="#car-dodger"
     begin="0s"
     dur="12s"
     rotate="auto"
     repeatCount="1"
     fill="freeze" > 
		    <mpath xlink:href="#carPath" />
  </animateMotion>
</svg>

Arthur · Answer 2 · 2020-02-20T04:46:35Z

公共汽车沿给定轨迹的运动：

* {
  margin: 0;
  padding: 0;
}

line {
  stroke-width: 3px;
  stroke: #bf0208;
}

<svg width="550" height="149" viewBox="0 0 550 149" style="background-color: #000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <filter id="blur-filter-light" x="-1" y="-1" width="10" height="10">
      <feGaussianBlur in="SourceGraphic" stdDeviation="18" />
    </filter>
    <g transform="scale(0.90) translate(0 -120)" id="myCar">
      <rect x="50" y="40" width="210" height="35" fill="rgba(255, 0, 0, 0.3)" stroke-width="5" stroke="#bf0208" rx="3" />
      <g>
        <rect x="50" y="70" width="210" height="35" fill="#bf0208" stroke-width="5" stroke="#bf0208" rx="3" />
        <rect x="259" y="70" width="5" height="15" fill="yellow" rx="5" />
        <polygon points="450,90 267,80 450,60" fill="yellow" filter="url(#blur-filter-light)" />
        <text x="125" y="82" fill="white" font-size="1.2em" font-family="Monospace">Lorem Bus</text>
      </g>
      <g>
        <line x1="80" x2="80" y1="40" y2="70" />
        <line x1="110" x2="110" y1="40" y2="70" />
        <line x1="140" x2="140" y1="40" y2="70" />
        <line x1="170" x2="170" y1="40" y2="70" />
        <line x1="200" x2="200" y1="40" y2="70" />
        <line x1="230" x2="230" y1="40" y2="70" />
      </g>
      <g>
        <circle cx="75" cy="105" r="15" fill="gray" stroke="black" stroke-width="3" />
        <rect width="10" height="4" x="70" y="104" rx="3" fill="white" />
        <animateTransform attributeName="transform" type="rotate" values="0 75 105;360 75 105" dur="1s" repeatCount="7" />
      </g>
      <g>
        <circle cx="110" cy="105" r="15" fill="gray" stroke="black" stroke-width="3" />
        <rect width="10" height="4" x="105" y="104" rx="3" fill="white" />
        <animateTransform attributeName="transform" type="rotate" values="0 110 105;360 110 105" dur="1s" repeatCount="7" />
      </g>
      <g>
        <circle cx="225" cy="105" r="15" fill="gray" stroke="black" stroke-width="3" />
        <rect width="10" height="4" x="220" y="104" rx="3" fill="white" />
        <animateTransform attributeName="transform" type="rotate" values="0 225 105;360 225 105" dur="1s" repeatCount="7" />
      </g>
    </g>
    <path id="carPath" style="fill:none; stroke:white; stroke-width:1px;" d="m 0,147.8636 612.74654,0.53454" />
    <animateMotion xlink:href="#myCar" begin="0.3s" dur="7s" repeatCount="none">
      <mpath xlink:href="#carPath" />
    </animateMotion>
    <svg width="550" height="149" viewBox="0 0 550 149" style="border: 1px solid; background-color: #000" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
      <filter id="blur-filter-light" x="-1" y="-1" width="10" height="10">
        <feGaussianBlur in="SourceGraphic" stdDeviation="18" />
      </filter>
      <g transform="scale(0.90) translate(0 -120)" id="myCar">
        <rect x="50" y="40" width="210" height="35" fill="rgba(255, 0, 0, 0.3)" stroke-width="5" stroke="#bf0208" rx="3" />
        <g>
          <rect x="50" y="70" width="210" height="35" fill="#bf0208" stroke-width="5" stroke="#bf0208" rx="3" />
          <rect x="259" y="70" width="5" height="15" fill="yellow" rx="5" />
          <polygon points="450,90 267,80 450,60" fill="yellow" filter="url(#blur-filter-light)" />
          <text x="125" y="82" fill="white" font-size="1.2em" font-family="Monospace">Lorem Bus</text>
        </g>
        <g>
          <line x1="80" x2="80" y1="40" y2="70" />
          <line x1="110" x2="110" y1="40" y2="70" />
          <line x1="140" x2="140" y1="40" y2="70" />
          <line x1="170" x2="170" y1="40" y2="70" />
          <line x1="200" x2="200" y1="40" y2="70" />
          <line x1="230" x2="230" y1="40" y2="70" />
        </g>
        <g>
          <circle cx="75" cy="105" r="15" fill="gray" stroke="black" stroke-width="3" />
          <rect width="12" height="4" x="70" y="104" rx="3" fill="white" />
          <animateTransform attributeName="transform" type="rotate" values="0 75 105;360 75 105" dur="1s" repeatCount="7" />
        </g>
        <g>
          <circle cx="110" cy="105" r="15" fill="gray" stroke="black" stroke-width="3" />
          <rect width="12" height="4" x="105" y="104" rx="3" fill="white" />
          <animateTransform attributeName="transform" type="rotate" values="0 110 105;360 110 105" dur="1s" repeatCount="7" />
        </g>
        <g>
          <circle cx="225" cy="105" r="15" fill="gray" stroke="black" stroke-width="3" />
          <rect width="12" height="4" x="220" y="104" rx="3" fill="white" />
          <animateTransform attributeName="transform" type="rotate" values="0 225 105;360 225 105" dur="1s" repeatCount="7" />
        </g>
      </g>
      <path id="carPath" style="fill:none; stroke:white; stroke-width:1px;" d="m 0,147.8636 612.74654,0.53454" />
      <animateMotion xlink:href="#myCar" begin="0.3s" dur="7s" repeatCount="none">
        <mpath xlink:href="#carPath" />
      </animateMotion>
    </svg>

Alexandr_TT · Answer 3 · 2020-02-19T20:19:53Z

这是一个教程示例。一步一步地画出汽车的细节，随着你的进步，在实践中如何应用基本的 svg 命令将很容易理解：line, rect, circle,path

这辆车的 svg 代码取自 Yulia Bukhvalova (Yulya Buhvalova)的网站

我们绘制车顶和车身的轮廓 - 只需一个命令<rect>

<svg width="580" height="200" viewBox="0 0 580 200"
      xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink" >
<g id="car-dodger" transform="scale(1.0)">
    <!-- Top -->
      <rect x="70" y="10" width="220" height="130" fill="transparent" rx="150" stroke="dodgerblue" stroke-width="10" />
 </g>  
</svg>

我们画出身体的主要部分：

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

<g id="car-dodger" transform="scale(1.0)">
    <!-- Top -->
      <rect x="70" y="10" width="220" height="130" fill="transparent" rx="150" stroke="dodgerblue" stroke-width="10" />
     <!-- Body -->
      <rect x="10" y="70" width="340" height="80" fill="dodgerblue" rx="30" />
</g>  
</svg>

添加窗框

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

<g id="car-dodger" transform="scale(1.0)">
    <!-- Top -->
      <rect x="70" y="10" width="220" height="130" fill="transparent" rx="150" stroke="dodgerblue" stroke-width="10" />
     <!-- Body -->
      <rect x="10" y="70" width="340" height="80" fill="dodgerblue" rx="30" /> 
	  
	   <g>
    <!-- Left line -->
      <line x1="145" y1="10" x2="145" y2="80" stroke="dodgerblue" stroke-width="10"/>

    <!-- Right line -->
      <line x1="215" y1="10" x2="215" y2="80" stroke="dodgerblue" stroke-width="10"/>
    </g>
</g>  
</svg>

添加前后保险杠：

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

<g id="car-dodger" transform="scale(1.0)">
    <!-- Top -->
      <rect x="70" y="10" width="220" height="130" fill="transparent" rx="150" stroke="dodgerblue" stroke-width="10" />
     <!-- Body -->
      <rect x="10" y="70" width="340" height="80" fill="dodgerblue" rx="30" /> 
	  
	   <g>
    <!-- Left line -->
      <line x1="145" y1="10" x2="145" y2="80" stroke="dodgerblue" stroke-width="10"/>

    <!-- Right line -->
      <line x1="215" y1="10" x2="215" y2="80" stroke="dodgerblue" stroke-width="10"/>
    </g>
	 <g>
    <!-- Left bumper -->
      <rect x="0" y="110" width="40" height="20" fill="#999" rx="10" />
    
    <!-- Right bumper -->
      <rect x="325" y="110" width="40" height="20" fill="#999" rx="10" />
    </g>  
</g>  
</svg>

添加轮子：

<svg width="580" height="200" viewBox="0 0 580 200"
      xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink">
	
<g id="car-dodger" transform="scale(1.1)">
    <!-- Top -->
      <rect x="70" y="10" width="220" height="130" fill="transparent" rx="150" stroke="dodgerblue" stroke-width="10" />
   
	
    <!-- Body -->
      <rect x="10" y="70" width="340" height="80" fill="dodgerblue" rx="30" />
      
    <g>
    <!-- Left line -->
      <line x1="145" y1="10" x2="145" y2="80" stroke="dodgerblue" stroke-width="10"/>

    <!-- Right line -->
      <line x1="215" y1="10" x2="215" y2="80" stroke="dodgerblue" stroke-width="10"/>
    </g>
  
    <g>
    <!-- Left bumper -->
      <rect x="0" y="110" width="40" height="20" fill="#999" rx="10" />
    
    <!-- Right bumper -->
      <rect x="325" y="110" width="40" height="20" fill="#999" rx="10" />
    </g>  
  
    <!-- Left wheel  -->
    <g>
      <circle r="40px" fill="#222" stroke="white" stroke-width="4" cx="90" cy="140"/>    
      <circle r="15px" fill="#555" cx="90" cy="140"/>
    
	</g>
  
    <!-- Right wheel -->
    <g>
      <circle r="40px" fill="#222" stroke="white" stroke-width="7" cx="270" cy="140"/>
      <circle r="15px" fill="#555" cx="270" cy="140"/>
    </g>  

    
	</g>
</svg>

添加大灯：

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

<g id="car-dodger" transform="scale(1.0)">
    <!-- Top -->
      <rect x="70" y="10" width="220" height="130" fill="transparent" rx="150" stroke="dodgerblue" stroke-width="10" />
	   <!-- Tail Lights red -->
	<circle r="10px" fill="crimson" cx="15" cy="90" />
	
     <!-- Body -->
      <rect x="10" y="70" width="340" height="80" fill="dodgerblue" rx="30" /> 
	  
	   <g>
    <!-- Left line -->
      <line x1="145" y1="10" x2="145" y2="80" stroke="dodgerblue" stroke-width="10"/>

    <!-- Right line -->
      <line x1="215" y1="10" x2="215" y2="80" stroke="dodgerblue" stroke-width="10"/>
    </g>
	 <g>
    <!-- Left bumper -->
      <rect x="0" y="110" width="40" height="20" fill="#999" rx="10" />
    
    <!-- Right bumper -->
      <rect x="325" y="110" width="40" height="20" fill="#999" rx="10" />
    </g>  
	
	 <!-- Left wheel -->
    <g>
      <circle r="40px" fill="#222" stroke="white" stroke-width="7" cx="90" cy="140"/>    
      <circle r="15px" fill="#555" cx="90" cy="140"/>
    </g>
  
    <!-- Right wheel -->
    <g>
      <circle r="40px" fill="#222" stroke="white" stroke-width="7" cx="270" cy="140"/>
      <circle r="15px" fill="#555" cx="270" cy="140"/>
    </g>  
       <g>
    <!-- Gold light -->
      <circle r="15px" fill="gold" cx="340" cy="90"/>
      
       </g>  
</g>  
</svg>

车准备好了。当然，你可以继续进一步——装饰，添加新的细节，但原则上就足够了，因为动画中会用到汽车的小尺寸，细节不会特别明显。
但是轮胎是光头的，添加胎面stroke-dasharray 并增加车轮的旋转：

<animateTransform attributeName="transform" type="rotate" values="0 90 140;360 90 140"  dur="2s" repeatCount="3" />

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


<g id="car-dodger" transform="scale(1)">
    <!-- Top -->
      <rect x="70" y="10" width="220" height="130" fill="transparent" rx="150" stroke="dodgerblue" stroke-width="10" />
    <!-- Tail Lights red -->
	<circle r="10px" fill="crimson" cx="15" cy="90" />
	
    <!-- Body -->
      <rect x="10" y="70" width="340" height="80" fill="dodgerblue" rx="30" />
      
    <g>
    <!-- Left line -->
      <line x1="145" y1="10" x2="145" y2="80" stroke="dodgerblue" stroke-width="10"/>

    <!-- Right line -->
      <line x1="215" y1="10" x2="215" y2="80" stroke="dodgerblue" stroke-width="10"/>
    </g>
  
    <g>
    <!-- Left bumper -->
      <rect x="0" y="110" width="40" height="20" fill="#999" rx="10" />
    
    <!-- Right bumper -->
      <rect x="325" y="110" width="40" height="20" fill="#999" rx="10" />
    </g>  
  
    <!-- Left wheel  -->
    <g stroke-dasharray="6.28 6.28">
      <circle r="40px" fill="#222" stroke="white" stroke-width="4" cx="90" cy="140"/>    
      <circle r="22px" fill="#5C5C5C" cx="90" cy="140"/> 
	   <polyline points="90,140 97.5 147.5" stroke="white" stroke-width="6" stroke-linecap="round" /> 
	   <animateTransform
       attributeName="transform" 
       type="rotate"
       values="0 90 140;360 90 140"
       dur="2s" repeatCount="3" />
     </g>
     <!-- Right wheel -->
    <g stroke-dasharray="6.28 6.28">
      <circle r="40px" fill="#222" stroke="white" stroke-width="4" cx="270" cy="140"/>
      <circle r="22px" fill="#5C5C5C" cx="270" cy="140"/> 
	  <polyline points="270,140 277.5 147.5" stroke="white" stroke-width="6" stroke-linecap="round" />
	   <animateTransform
       attributeName="transform"
       type="rotate"
       values="0 270 140;360 270 140"
       dur="2s" repeatCount="3" />
	  </g>  

    <g>
    <!-- Gold light -->
      <circle r="15px" fill="gold" cx="340" cy="90"/>
      
       </g>  
	</g>
</svg>

相关问题：使用 SVG 进行火车运动

soledar10 · Answer 4 · 2020-07-02T21:27:41Z

示例

*,
:before,
:after {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.car {
  position: relative;
  height: 200px;
  overflow: hidden;
  border-bottom: 7px solid #ccc;
}

.car__inner {
  padding-bottom: 30px;
  -webkit-animation: goToCar 5s linear infinite;
  animation: goToCar 5s linear infinite;
}

@-webkit-keyframes goToCar {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}

@keyframes goToCar {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}

.car__contour {
  height: 130px;
  width: 220px;
  margin: 25px auto -70px auto;
  border: 10px solid #1E90FF;
  -webkit-border-radius: 220px / 130px;
  border-radius: 220px / 130px;
  position: relative;
}

.car__contour:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -40px;
  height: 100%;
  width: 80px;
  border: 10px solid #1E90FF;
  border-top: none;
}

.car__body {
  width: 340px;
  height: 80px;
  background: #1E90FF;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  margin: 0 auto;
  position: relative;
}

.car__headlight {
  position: absolute;
  top: 10px;
  left: -5px;
  background: #DC143C;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: -1;
}

.car__headlight--front {
  top: 5px;
  left: auto;
  right: -10px;
  background: #FFD700;
  width: 30px;
  height: 30px;
  z-index: 1;
}

.car__bumper {
  position: absolute;
  bottom: 20px;
  left: -5px;
  width: 40px;
  height: 20px;
  background: #999;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.car__bumper--front {
  left: auto;
  right: -20px;
}

.car__wheel {
  position: absolute;
  bottom: -35px;
  left: 45px;
  width: 90px;
  height: 90px;
  background: #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.car__wheel:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  background: #222;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: 1;
  margin: -38px 0 0 -38px;
  -webkit-animation: rotateWheel 2s linear infinite;
  animation: rotateWheel 2s linear infinite;
  border: 2px dashed #fff;
}

@-webkit-keyframes rotateWheel {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotateWheel {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.car__wheel:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  background: #555;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: 1;
  margin: -15px 0 0 -15px
}

.car__wheel--front {
  left: auto;
  right: 45px;
}

<div class="car">
  <div class="car__inner">
    <div class="car__contour"></div>
    <div class="car__body">
      <div class="car__headlight"></div>
      <div class="car__headlight car__headlight--front"></div>

      <div class="car__bumper"></div>
      <div class="car__bumper car__bumper--front"></div>

      <div class="car__wheel"></div>
      <div class="car__wheel car__wheel--front"></div>
    </div>
  </div>
</div>

如何使用 SVG 命令绘制汽车

汽车沿给定轨迹运动的动画

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

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

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

控制台中的光标坐标

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

点是否属于线段的问题

json结构错误

ServiceWorker 中的“获取”事件

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

按多列从sql表中选择