HTML5 画布canvas

时间：2023-12-06 10:09:44

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

相关文章