2. svg填充和边框

2019-04-12  本文已影响0人  琉璃_xin

在基础图形部分已经有在使用填充和边框属性,使用的是css的style方式插入到元素中,这里使用定义对象的属性

1.fill

     <rect x="10" y="10" width="100" height="100" fill="purple" fill-opacity="0.5"/>
fill

2.stroke

3.渐变

必须给渐变内容指定一个id属性,否则文档内的其他元素就不能引用它。为了让渐变能被重复使用,渐变内容需要定义在<defs>标签内部,而不是定义在形状上面

  1. 线性渐变
    要插入一个线性渐变,你需要在SVG文件的defs元素内部,创建一个<linearGradient> 节点
     <defs>
       <linearGradient id="linearGradient1">
        <stop stop-color="red" offset="0%"/>
        <stop stop-color="blue" stop-opacity="0.6" offset="50%"/>
        <stop stop-color="green" offset="100%"/>
       </linearGradient>
       <linearGradient id="linearGradient2" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="50%" stop-color="black" stop-opacity="0"/>
        <stop offset="100%" stop-color="blue"/>
      </linearGradient>
      <linearGradient id="linearGradient3" x1="0" x2="0" y1="0" y2="1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#linearGradient1" />
     </defs>
     <rect x="10" y="10" width="100" height="100" fill="url(#linearGradient1)" />
     <rect x="120" y="10" width="100" height="100" fill="url(#linearGradient2)" />
     <rect x="230" y="10" width="100" height="100" fill="url(#linearGradient3)" />
linearGradient
  1. 径向渐变
     <defs>
       <radialGradient id="RadialGradient1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
       </radialGradient>
       <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
       </radialGradient>
       <!-- fx和fy 焦点--渐变的中心-->
       <radialGradient id="RadialGradient3"
       cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
      </radialGradient>
     </defs>
     <rect x="10" y="10" width="100" height="100" fill="url(#RadialGradient1)" />
     <rect x="120" y="10" width="100" height="100" fill="url(#RadialGradient2)" />
     <rect x="230" y="10" width="100" height="100" fill="url(#RadialGradient3)" />
radialGradient
上一篇下一篇

猜你喜欢

热点阅读