SVG编辑小记

SVG基础：https://www.jianshu.com/p/57cbf47b732c

可伸缩矢量图形
XML 格式定义图形

本月是个神奇的月份，做了多个类似的活动，类似到除了底图文案等页面的布局和内容是一样的。然而有一个title的装饰icon，每次页面主题修改的时候都需要变换颜色，并且UI无法导出SVG，那么就用代码写一个svg好了。

样式如图：

构造还算简单，图案就是一个菱形，只是颜色透明度不同。
简单查了下svg的api就开始写了，用了个最笨的办法，用polygon画区域，手动定位

<svg width="200" height="100" viewBox="0 0 2048 1024" xmlns="http://www.w3.org/2000/svg" version="1.1">
	<polygon points="10,100 100,200 190,100 100,0" style="fill:#007aa0;opacity:0.7;" />
	<polygon points="10,370 100,470 190,370 100,270" style="fill:#007aa0;opacity:0.7;" />
	<polygon points="10,640 100,740 190,640 100,540" style="fill:#007aa0;opacity:0.7;" />
	<polygon points="10,910 100,1010 190,910 100,810" style="fill:#007aa0;opacity:0.7;" />
  
	<polygon points="260,100 350,200 440,100 350,0" style="fill:#007aa0;opacity:0.6;" />
	<polygon points="260,370 350,470 440,370 350,270" style="fill:#007aa0;opacity:0.6;" />
	<polygon points="260,640 350,740 440,640 350,540" style="fill:#007aa0;opacity:0.6;" />
	<polygon points="260,910 350,1010 440,910 350,810" style="fill:#007aa0;opacity:0.6;" />
	
	<polygon points="510,100 600,200 690,100 600,0" style="fill:#007aa0;opacity:0.5;" />
	<polygon points="510,370 600,470 690,370 600,270" style="fill:#007aa0;opacity:0.5;" />
	<polygon points="510,640 600,740 690,640 600,540" style="fill:#007aa0;opacity:0.5;" />
	<polygon points="510,910 600,1010 690,910 600,810" style="fill:#007aa0;opacity:0.5;" />
	
	<polygon points="760,100 850,200 940,100 850,0" style="fill:#007aa0;opacity:0.4;" />
	<polygon points="760,370 850,470 940,370 850,270" style="fill:#007aa0;opacity:0.4;" />
	<polygon points="760,640 850,740 940,640 850,540" style="fill:#007aa0;opacity:0.4;" />
	
	<polygon points="1010,100 1100,200 1190,100 1100,0" style="fill:#007aa0;opacity:0.3;" />
	<polygon points="1010,370 1100,470 1190,370 1100,270" style="fill:#007aa0;opacity:0.3;" />
	
	<polygon points="1260,100 1350,200 1440,100 1350,0" style="fill:#007aa0;opacity:0.2;" />
</svg>

这种方式毕竟过于人工，调整起来很麻烦，查找api后发现可以用pattern定义区域，用于rect填充，自动生成重复平铺的svg。效果也不错，最大的好处就是不用人工挨个定位，省去了一些调试的成本：(https://www.cnblogs.com/lhweb15/p/5489699.html)

<svg width="200" height="100" viewBox="0 0 2048 1024" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g style="fill:#007aa0;opacity:0.7;">
    <defs>
        <pattern id="p1" x="0" y="0" width="1" height="0.25">
            <polygon points="10,100 100,200 190,100 100,0" />
        </pattern>
    </defs>
    <rect x="0" y="0" width="10%" height="100%"  fill="url(#p1)"></rect>
  </g>
  <g style="fill:#007aa0;opacity:0.6;">
    <rect x="11.5%" y="0" width="10%" height="100%"  fill="url(#p1)"></rect>
  </g>
  <g style="fill:#007aa0;opacity:0.5;">
    <rect x="23%" y="0" width="10%" height="100%"  fill="url(#p1)"></rect>
  </g>
  <g style="fill:#007aa0;opacity:0.4;">
    <defs>
        <pattern id="p4" x="0" y="0" width="1" height="0.3333333" >
            <polygon points="10,100 100,200 190,100 100,0" />
        </pattern>
    </defs>
    <rect x="34.5%" y="0" width="10%" height="75%"  fill="url(#p4)"></rect>
  </g>

  <g style="fill:#007aa0;opacity:0.3;">
    <defs>
        <pattern id="p5" x="0" y="0" width="1" height="0.5" >
            <polygon points="10,100 100,200 190,100 100,0" />
        </pattern>
    </defs>
    <rect x="46%" y="0" width="10%" height="50%"  fill="url(#p5)"></rect>
  </g>

  <g style="fill:#007aa0;opacity:0.2;">
    <defs>
        <pattern id="p6" x="0" y="0" width="1" height="1" >
            <polygon points="10,100 100,200 190,100 100,0" />
        </pattern>
    </defs>
    <rect x="57.5%" y="0" width="10%" height="25%"  fill="url(#p6)"></rect>
  </g>
</svg>

看完这张效果图有没有发现问题？作为深受上下居中对齐荼毒的我，一秒头疼。这个效果图的底部天然带有十几左右像素的padding。这样放到title上作为装饰，与title文字对齐的时候可能会出现图片往上飘的视觉效果。

本以为这个原因可以通过对rect或者分组g进行类似居中的样式来解决。分析之后发现好像并不是这样。rect在平铺pattern的时候，是直接把rect分成pattern定义的长宽，然后将pattern放置在左上的位置。查了一圈，好像并没有类似css中background-position的属性。想想可能也并没有必要。svg图像在放大或改变尺寸的情况下内部元素的定位比例是固定的，居中可以通过调整 x y来实现。如下，调整rect的y值使平铺图案居中：

<svg width="200" height="100" viewBox="0 0 2048 1024" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g style="fill:#007aa0;opacity:0.7;">
    <defs>
        <pattern id="p1" x="0" y="0" width="1" height="0.25">
            <polygon points="10,100 100,200 190,100 100,0" />
        </pattern>
    </defs>
    <rect x="0" y="28" width="10%" height="100%"  fill="url(#p1)"></rect>
  </g>
  <g style="fill:#007aa0;opacity:0.6;">
    <rect x="11.5%" y="28" width="10%" height="100%"  fill="url(#p1)"></rect>
  </g>
  <g style="fill:#007aa0;opacity:0.5;">
    <rect x="23%" y="28" width="10%" height="100%"  fill="url(#p1)"></rect>
  </g>
  <g style="fill:#007aa0;opacity:0.4;">
    <defs>
        <pattern id="p4" x="0" y="0" width="1" height="0.3333333" >
            <polygon points="10,100 100,200 190,100 100,0" />
        </pattern>
    </defs>
    <rect x="34.5%" y="28" width="10%" height="75%"  fill="url(#p4)"></rect>
  </g>

  <g style="fill:#007aa0;opacity:0.3;">
    <defs>
        <pattern id="p5" x="0" y="0" width="1" height="0.5" >
            <polygon points="10,100 100,200 190,100 100,0" />
        </pattern>
    </defs>
    <rect x="46%" y="28" width="10%" height="50%"  fill="url(#p5)"></rect>
  </g>

  <g style="fill:#007aa0;opacity:0.2;">
    <defs>
        <pattern id="p6" x="0" y="0" width="1" height="1" >
            <polygon points="10,100 100,200 190,100 100,0" />
        </pattern>
    </defs>
    <rect x="57.5%" y="28" width="10%" height="25%"  fill="url(#p6)"></rect>
  </g>
</svg>

在分析的过程中还发现了一件有意思的事情：svg中的坐标长度单位和width/height的长度单位似乎不一样。此处我定义的菱形坐标为"10,100 100,200 190,100 100,0"，如果长度单位一样，那菱形的高应该是200，但实际是19.53。

优势

图像在放大或改变尺寸的情况下其图形质量不会有所损失
可编辑

问题

1. rect平铺图像是否只能通过x，y定位？
2. 坐标长度和svg长宽的关系
3. viewBox与svg width height的关系 及 用法（目前手动调整，保证 viewBox 与 svg width height的比例一致）

在附上几个svg图案：
http://www.runoob.com/try/try.php?filename=trysvg_fegaussianblur
https://www.cnblogs.com/coco1s/archive/2017/07/18/7197662.html
http://www.w3school.com.cn/svg/path2.svg
https://blog.csdn.net/chy555chy/article/details/53333422