SVG翻转 --- ZC测试(1)

1、测试代码 ?.svg文件

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="-300 -300 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:cge="http://www.cim.com" source="NR-PCS9000">
    <defs>
    </defs>

<g>
<line x1="-300" y1="0" x2="500" y2="0" stroke="blue" stroke-width="1" />
<line x1="0" y1="-300" x2="0" y2="500" stroke="blue" stroke-width="1" />

    <polyline points="100,100 200,100 150,120" stroke-width="1" stroke="black" fill="none"/>
    <!--
    <polyline points="100,100 200,100 150,120" stroke-width="1" stroke="black" fill="none" transform="scale(-1, 1)"/>
    -->
    <polyline points="100,100 200,100 150,120" stroke-width="1" stroke="black" fill="none" transform="rotate(90,100,100) scale(-1, 1)"/>
    <!-- transform="rotate(90,100,100) scale(-1, 1) translate(-554,0)" -->
</g>
</svg>

 

　　ZC: 从图形的效果看出来，transform属性的效果是从后往前来实现的，如这里的折线 先经过scale的翻转 然后才进行rotate在(100,100)的90°旋转

2、

3、

 

转载于:https://www.cnblogs.com/h5skill/p/6878849.html