标签：
SVG的<defs> <symbols> 元素用于预定义一个元素使其能够在SVG图像中重复使用
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="100">
<symbol id="shape2"> <circle cx="25" cy="25" r="25" style="fill:#bf55ec;"/> </symbol> <use xlink:href="#shape2" x="50" y="25" /></svg> <defs>
<linearGradient id="linearGradient">
<stop offset="0%" stop-color="#f00" />
<stop offset="100" stop-color="#f60" />
</linearGradient>
</defs>
// 应用线性渐变
<rect x="10" y="10" width="300" height="100" stroke="orange" stroke-width="5" fill="url(#linearGradient)" />
或
<defs><clipPath id="highcharts-1"><rect x="0" y="0" width="814" height="247"></rect></clipPath></defs>
<g class="highcharts-series highcharts-tracker" visibility="visible" zIndex="0.1" transform="translate(0,0) scale(1 1)" style="" clip-path="url(#highcharts-1)"></g>
transforms属性中的 translate:图形位置平移 scale:图形缩放 都是距离图形区域左上角的位置确定
如：
<defs><clipPath id="highcharts-1"><rect x="0" y="0" width="814" height="247"></rect></clipPath></defs>
<g class="highcharts-series highcharts-tracker" visibility="visible" zIndex="0.1" transform="translate(70,80) scale(1 1)" style="" clip-path="url(#highcharts-1)"></g>
如果scale Y轴缩小为原来的0.6倍scale(1 0.6)那么生成的图形即为 图形高度247*(1-0.6)+原Y轴值80 = 179.2
<g class="highcharts-series highcharts-tracker" visibility="visible" zIndex="0.1" transform="translate(70,179.2) scale(1 0.6)" style="" clip-path="url(#highcharts-1)"></g>
即：translate(70,80) scale(1 1) =======》》》translate(70,179.2) scale(1 0.6)
text-anchor属性可以用作对齐使用
transform="translate(0,0) rotate(旋转角度,旋转后位置X,位置Y)"
标签：
原文地址：http://www.cnblogs.com/tianzhongshan/p/5702942.html
