SVG-矢量图-奥运五环及奥迪标志

SVG继续基础玩法。

 

知识点一：style属性可以快速填写部分对应的值，但不是所有值都可以这样写。

知识点二：fill属性用来表示填充色，transparent表示透明，这可以实现空心圆。

<svg xmlns="http://www.w3.org/2000/svg" enable-background="gray">
  <circle cx="100" cy="100" r="50" fill="blue" stroke="aquamarine" stroke-width="10"></circle>
  <circle cx="200" cy="100" r="50" fill="transparent" stroke="aquamarine" stroke-width="10"></circle>
<!--  style属性的配置与上面的配置实现效果是一样的，但并不是所有的属性均可如此设置-->
  <circle cx="300" cy="100" r="50" style="fill:transparent;stroke:black;stroke-width:10"></circle>
</svg>

效果图：

好，回到正题，奥运五环和奥迪车标代码和效果图如下：

先看代码

<!--svg根节点标签，需要引入命名空间-->
<svg xmlns="http://www.w3.org/2000/svg" enable-background="gray">
<!--  奥运五环-->
  <circle cx="100" cy="100" r="50" fill="transparent" stroke="blue" stroke-width="10"></circle>
  <circle cx="230" cy="100" r="50" fill="transparent" stroke="black" stroke-width="10"></circle>
  <circle cx="360" cy="100" r="50" fill="transparent" stroke="red" stroke-width="10"></circle>
  
  <circle cx="165" cy="150" r="50" fill="transparent" stroke="yellow" stroke-width="10"></circle>
  <circle cx="295" cy="150" r="50" fill="transparent" stroke="green" stroke-width="10"></circle>
  
  
<!--  奥迪车标-->
  <circle cx="100" cy="300" r="50" fill="transparent" stroke="black" stroke-width="10"></circle>
  <circle cx="170" cy="300" r="50" fill="transparent" stroke="black" stroke-width="10"></circle>
  <circle cx="240" cy="300" r="50" fill="transparent" stroke="black" stroke-width="10"></circle>
  <circle cx="310" cy="300" r="50" fill="transparent" stroke="black" stroke-width="10"></circle>
</svg>

效果图