这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战

SVG（四）——path应用

接上文

（5）路径属性应用

• 上篇文章介绍了一些<path>属性的指令，这次来看下如何使用

• 对于基本形状都可以使用<path>属性去实现

  <!-- line -->
  <path d="M 100 100, L 200 200 " stroke="red"/>
  <!-- polyline  -->
  <path d="M 200 200, L 275 175, L 200 150, L 300 100 " fill="none" stroke="blue"/>
  <!-- rect -->
  <path d="M 300 100, L 300 200, L 400 200, L 400 100, Z " stroke="green"/>
  <!-- circle -->
  <path d="M 400 150, A 50 50 0 1 1 500 150, A 50 50 0 1 1 400 150, Z " stroke="purple"/>
  
  

  

• 其它指令的效果

  • 贝塞尔曲线

    
    <path d="M 100 100, Q 150 0 200 100 " stroke="red"/>
    <path d="M 100 200, Q 150 100 200 200, T 300 200, T 400 200 " stroke="red"/>
    
    

    

  • 三次贝塞尔曲线

    
    <path d="M 100 100, C 150 0 350 0 400 100" />
    <path d="M 100 200, C 125 100 175 100 200 200, S 275 100 300 200" />
    
    

    

（6）辅助属性

<g>元素

• <g>元素即group分组，可以将多种形状，作为一个Group组合在一起

  • 其内部所有子元素会作为一个组合，通常在元素标签上还需要一个唯一标识id作为分组名称

  <g id='square'>
      <rect x='100' y='100' width='100' height='100'/>
      <rect x='125' y='125' width='50' height='50'/>
  </g>
  <g id='triangle'>
      <polygon points="250 200, 300 100, 350 200" />
      <polygon points="286.5 175, 300 150, 313.5 175" />
  </g>
  
  

  

<defs>元素

• <defs>元素可以定义一些可以复用的图形

  • 需要将所有想要复用的对象组合放置在<defs>元素内

  • <defs>元素内部的路径不会被绘制到屏幕上

    • 而是作为一种存储库，或者说一种模板，防止所有可复用的形状组合，然后在其他地方使用

    <defs>
        <g id='square'>
            <rect x='100' y='100' width='100' height='100'/>
            <rect x='125' y='125' width='50' height='50'/>
        </g>
        <g id='triangle'>
            <polygon points="250 200, 300 100, 350 200" />
            <polygon points="286.5 175, 300 150, 313.5 175" />
        </g>
    </defs>
    

<use>元素

• <use>元素可以获取在<defs>中定义的复用对象，并在SVG中显示出来

  • 需要给xlink:href属性指定URL，即组合元素的id

  • 同时还要指定x和y，表示将该组合形状放置到(x,y)位置

    • 然后，组合形状内部设置的坐标会以这个点(x,y)作为原点，来绘制内部的形状
    • 如果没有指定，则默认为原点(0,0)

    <use href="#square" x="0" y="0"/>
    <use href="#triangle" x="-150" y="-100"/>
    
    

    

<symbol>元素

• <symbol>元素类似于一个组合，但是拥有一些额外的特性
  • 它可以为当前可复用的代码块增加视图属性和视口属性（下一文章介绍）