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、