美文网首页新媒体运营札记
SVG基本图形、基本属性、基本操作

SVG基本图形、基本属性、基本操作

作者: David_Rao | 来源:发表于2020-02-10 20:18 被阅读0次

    基本图形和属性

    1. 基本图形
    • <rect>
    • <circle>
    • <ellipse>
    • <line>
    • <polyline>
    • <polygon>
    1. 基本属性
    • fill
    • stroke
    • stroke-width
    • transform

    1、<rect>矩形

    2、<circle>圆形

    3、<ellipse>椭圆

    4、<line>直线

    5、<polyline>折线

    6、<polygon>多边形

    7、基本属性

    • fill填充颜色
    • stroke描边
    • stroke-width描边颜色
    • transform变形

    示例

    <svg xmlns="http://www.w3.org/2000/svg">
        <rect
            x="10"
            y="10"
            rx="5"
            ry="5"
            width="150"
            height="100"
            stroke="red"
            fill="none">
        </rect>
    
        <circle
            cx="250"
            cy="60"
            r="50"
            stroke="red"
            fill="none">
        </circle>
    
        <ellipse
            cx="400"
            cy="60"
            rx="70"
            ry="50"
            stroke="red"
            fill="none">
        </ellipse>
    
        <line
            x1="10"
            y1="120"
            x2="160"
            y2="220"
            stroke="red">
        </line>
    
        <polyline
            points="250 120
                    300 220
                    200 220"
            stroke="red"
            fill="none">
        </polyline>
    
        <polygon
                points="250 120
                    300 220
                    200 220"
                stroke="red"
                stroke-width="5"
                fill="yellow"
                transform="translate(150 0)">
        </polygon>
    </svg>
    

    基本操作

    1. 创建图形
    • document.createElementNS(ns, tagName)
    1. 添加图形
    • element.appendChild(childElement)
    1. 设置/获取属性
    • element.setAttribute(name, value)
    • element.getAttribute(name)

    相关文章

      网友评论

        本文标题:SVG基本图形、基本属性、基本操作

        本文链接:https://www.haomeiwen.com/subject/bvraxhtx.html