svg常用简单示例

最新推荐文章于 2024-07-31 16:50:09 发布

vcxiaohan2

最新推荐文章于 2024-07-31 16:50:09 发布

阅读量1.3k

点赞数

分类专栏： svg

本文链接：https://blog.csdn.net/u011500781/article/details/51938784

版权

svg 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

渐变的使用：

    <svg width="400" height="300" viewBox="0 0 400 300">
        <defs>
            <linearGradient id="linear" x1="0%" x2="100%" y1="0%" y2="100%">
                <stop offset="0%" stop-color="#000"></stop>
                <stop offset="50%" stop-color="#fff"></stop>
                <stop offset="100%" stop-color="#000"></stop>
            </linearGradient>
            <radialGradient id="radial" cx="0%" cy="0%" r="100%" fx="50%" fy="50%">
                <stop offset="0%" stop-color="#000"></stop>
                <stop offset="50%" stop-color="#fff"></stop>
                <stop offset="100%" stop-color="#000"></stop>
            </radialGradient>
        </defs>
        <rect x="0" y="0" width="100" height="80" rx="5" ry="5" fill="url(#linear)"></rect>        
        <rect x="50" y="50" width="100" height="80" rx="5" ry="5" fill="url(#radial)"></rect>        
    </svg>

笔刷的使用：

    <svg width="400" height="300" viewBox="0 0 400 300">
        <pattern id="pattern" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="50" height="50" rx="0" ry="0" stroke="red" fill="none"></rect>
        </pattern>
        <rect x="0" y="0" width="400" height="300" rx="0" ry="0" fill="url(#pattern)"></rect>
    </svg>

加上patternUnits="userSpaceOnUse"可以让笔刷的尺寸基于世界坐标系

圆弧的绘制：

    <svg width="400" height="300" viewBox="0 0 400 300">
        <path d="M10,10 V100 A100,100,0,0,0,110,10 Z" stroke="red" fill="none"></path>
    </svg>

3个0分别表示：旋转角0°、取小弧、逆时针方向

文本的使用：

    <svg width="400" height="300" viewBox="0 0 400 300">
        <text x="50" y="50" dx="20 40 60" dy="20 40 60" stroke="red" fill="green" font-size="30" font-family="Microsoft YaHei" base-line="top">你好啊</text>
    </svg>

路径文本：

    <svg width="400" height="300" viewBox="0 0 400 300">
        <path id="textPath" d="M10,50 Q30,100 50,50 T80,70" stroke="red" fill="none"></path>
        <text x="-30" dy="10">
            <textPath xlink:href="#textPath">你好啊我很好谢谢</textPath>
        </text>
    </svg>

裁剪示例：

    <svg width="100%" height="100%" viewbox="-100 -100 200 200">
        <defs>
            <clipPath id="clipPath">
                <polygon points="0,-10 2,-2 10,0 2,2 0,10 -2,2 -10,0 -2,-2"></polygon>
            </clipPath>
        </defs>
        <circle cx="15" cy="0" r="20" clip-path="url(#clipPath)" fill="yellow"></circle>
    </svg>

蒙板示例：

    <svg width="400" height="300" viewBox="0 0 400 300">
        <g id="shape">
            <linearGradient id="linear" x1="0%" x2="100%" y1="0%" y2="100%">
                <stop offset="0%" stop-color="#fff"></stop>
                <stop offset="70%" stop-color="#000"></stop>
            </linearGradient>
            <mask id="mask">
                <circle cx="50" cy="50" r="20" fill="url(#linear)"></circle>
            </mask>
            <circle cx="50" cy="50" r="20" fill="yellow" mask="url(#mask)"></circle>
        </g>
    </svg>

被蒙板物体是根据亮度来显示的，越亮，显示的越清晰

基本动画：

    <svg width="400" height="300" viewBox="0 0 400 300">
        <rect x="0" y="0" width="100" height="80" rx="5" ry="5">
            <animate id="animate" attributeType="XML" attributeName="fill" begin="0; animate2.end+1s" from="red" to="blue" dur="2s" fill="freeze"></animate>
            <animate id="animate2" attributeType="XML" attributeName="x" begin="animate.end+1s" from="0" to="100" dur="2s" fill="freeze"></animate>
        </rect>
    </svg>

多个动画是可以同时进行的；repeatCount="indefinite"可以让动画永远进行下去。

变换动画：

    <svg width="400" height="300" viewBox="0 0 400 300">
        <rect x="0" y="0" width="100" height="80" rx="5" ry="5">
            <animateTransform  attributeType="XML" attributeName="transform" type="rotate" from="0" to="45" dur="2s" fill="freeze"></animateTransform>
        </rect>
    </svg>

路径动画：

    <svg width="400" height="300" viewBox="0 0 400 300">
        <rect x="0" y="0" width="30" height="40" rx="5" ry="5">
            <animateMotion  path="M0,0 L20,100 L80,100 Z" rotate="auto" dur="2s" fill="freeze"></animateMotion>
        </rect>
        <path d="M0,0 L20,100 L80,100 Z" stroke="red" fill="none"></path>
    </svg>

动画响应事件：

    <svg width="400" height="300" viewBox="0 0 400 300">
        <circle id="circle" cx="50" cy="50" r="20"></circle>
        <rect x="0" y="0" width="30" height="30" rx="5" ry="5">
            <animate id="animate1" attributeName="x" begin="circle.mouseover; accesskey(s)" end="circle.mouseout" from="50" by="100" dur="2s" repeatCount="indefinite" repeatDur="5"></animate>
            <animate id="animate2" attributeName="fill" begin="animate1.repeat(2)" from="red" to="blue" dur="2s"></animate>
        </rect>
    </svg>

accesskey(s) 不兼容chrome