HTML5 画布canvas

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> 

也可用url的方式引用

 <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)"