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、

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM