HTML的svg元素

news2025/4/18 15:21:23

`<svg>`元素

<svg>是一种用于描述二维矢量图形的 XML 格式，可以直接嵌入 HTML 文档中。

<svg>基本用法
<svg>的几种基本用法,包括圆形，正方形，三角形，直线，折线等

<body>
    <svg width="180" height="100">
        <!-- 圆 -->
    <circle cx="50" cy="50" r="40" storke-width="4" fill="yellow" />
    </svg>

    <svg width="180" height="100">
        <!-- 正方形 -->
        <rect x="10" y="10" width="80" height="80" fill="blue" />
    </svg>

    <svg width="180" height="100">
        <!-- 椭圆 -->
        <ellipse cx="50" cy="50" rx="30" ry="20" fill="green" />
    </svg>

    <svg width="180" height="100">
        <!-- 直线 -->
        <line x1="10" y1="10" x2="90" y2="90" stroke="black" />
    </svg>

    <svg width="180" height="100">
        <!-- 三角形 -->
        <polygon points="50,10 90,90 10,90" fill="purple" />
    </svg>

    <svg width="300" height="200">
        <!-- 星型 -->
        <polygon points="100,10,40,198,190,78,10,78,160,198"
        style="fill: lime; stroke: plum; stroke-width: 5; fill-rule: evenodd;"/>
    </svg>

    <svg width="180" height="100">
        <!-- 折线 -->
        <polyline points="10,10 30,30 50,10 70,30 90,10" fill="none" stroke="black" />
    </svg>
</body>

<svg>也可以使用CSS属性

<svg width="100" height="100">
        <style>
          circle {
            fill: red;
            stroke: black;
            stroke-width: 3;
          }
        </style>
        <circle cx="50" cy="50" r="40" />
      </svg>

<svg>高级特性
<svg>渐变

<svg width="180" height="100">
        <!-- 渐变 -->
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
              <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
            </linearGradient>
        </defs>
        <rect x="10" y="10" width="80" height="80" fill="url(#grad1)" />
</svg>

<svg>滤镜

<svg width="180" height="100">
        <!-- 滤镜 -->
        <defs>
            <filter id="blur">
              <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
            </filter>
        </defs>
        <rect x="10" y="10" width="80" height="80" fill="blue" filter="url(#blur)" />
</svg>

<svg>动画

 <svg width="180" height="100">
        <!-- 动画 -->
        <circle cx="50" cy="50" r="20" fill="red">
            <animate attributeName="cx" from="50" to="150" dur="3s" repeatCount="indefinite" />
        </circle>
</svg>