html5 svg

Posted gyz418

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html5 svg相关的知识,希望对你有一定的参考价值。

html5 svg 

<html >
<body>
<p>canvas 用js 绘画,是整幅画布,适合游戏   svg可放大,支持dom 操作,js事件 线性渐变、高斯模糊、动画实例</p>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"  width="300" height="300" style="border:1px solid red;" >

    <!--圆形 cx cy 圆心 stroke 线条颜色 -->
    <circle cx="32" cy="32" r="30" stroke="black" stroke-width="1" fill="red" fill-opacity="0.5" />
    <!--矩形-->
    <rect x="80" y="10" width="100" height="100" stroke="black" stroke-width="2" fill="red" stroke-opacity="0.5"/>
    <!--矩形 rx ry 圆角大小-->
    <rect x="200" y="10" rx="20" ry="20" width="100" height="100" stroke="black" stroke-width="2" fill="red" stroke-opacity="0.5"/>
    <!--椭圆  cx cy 圆点 rx水平半径  ry 垂直半径-->
    <ellipse cx="100" cy="160" rx="80" ry="40" style="fill:#abcdef;stroke:#ccc;stroke-width:2"/>
    <!--线条 x1 y1 线条开始  x2 y2 线条结束-->
    <line x1="190" y1="170" x2="190" y2="150" style="stroke: red;stroke-width:2"/>
    <!--多边形 至少3条边  points 指各个顶点的坐标-->
    <polygon points="220,120 300,210 170,250" style="stroke:green;stroke-width:1;fill:green;"/>
    <!--只划线条-->
    <polyline points="10,200 10,220 20,220 20,240 40,240 40,260"style="fill:white;stroke:red;stroke-width:2"/>

    <!--  它开始于位置 250 150,到达位置 150 350,然后从那里开始到 350 350,最后在 250 150 关闭路径。
    M = moveto
    L = lineto
    H = horizontal lineto
    V = vertical lineto
    C = curveto
    S = smooth curveto
    Q = quadratic Belzier curve
    T = smooth quadratic Belzier curveto
    A = elliptical Arc
    Z = closepath
    注释:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。

    由于绘制路径的复杂性,因此强烈建议您使用 SVG 编辑器来创建复杂的图形。
    -->
    <path d="M50 250 L70 290 L90 300 Z" />

</svg>

</body>
</html>

高斯模糊 线性渐变 

<html >
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"  width="300" height="300" style="border:1px solid red;" >
    <!--高斯模糊 stdDeviation 模糊程度-->
    <defs>
        <filter id="Gaussian_Blur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
        </filter>
    </defs>
    <ellipse cx="70" cy="40" rx="70" ry="40"style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/>

    <!--线性渐变-->
    <defs>
        <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:red;stop-opacity:1"/>
            <stop offset="100%" style="stop-color:yellow;stop-opacity:1"/>
        </linearGradient>
    </defs>

    <ellipse cx="230" cy="50" rx="65" ry="35"style="fill:url(#orange_red)"/>
    <!--放射性渐变-->
    <defs>
        <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/>
            <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
        </radialGradient>
    </defs>

    <ellipse cx="50" cy="120" rx="40" ry="30"style="fill:url(#grey_blue)"/>

</svg>

</body>
</html>

 

以上是关于html5 svg的主要内容,如果未能解决你的问题,请参考以下文章

常用HTML5代码片段

Html5拖放到svg元素上

Html5拖放到svg元素上

如何在HTML5中使用SVG

十个html5代码片段,超实用,一定要收藏

如何用svg代码排版微信?