SVG标签类型
2025-07-02 00:10:46
20
支持的SVG标签类型及插入示例：
基本形状标签：
<svg width="100" height="100"> <rect x="10" y="10" width="80" height="80" fill="red"/> </svg>
路径标签：
<svg width="100" height="100"> <path d="M10 10 L90 10 L50 90 Z" fill="blue"/> </svg>
文本标签：
<svg width="200" height="100"> <text x="20" y="50" font-family="Arial" font-size="20">SVG文本</text> </svg>
圆形标签：
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill="green"/> </svg>
椭圆标签：
<svg width="100" height="100"> <ellipse cx="50" cy="50" rx="40" ry="30" fill="yellow"/> </svg>
线条标签：
<svg width="100" height="100"> <line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="2"/> </svg>
多边形标签：
<svg width="100" height="100"> <polygon points="50,10 90,90 10,90" fill="purple"/> </svg>
图像标签：
<svg width="100" height="100"> <image xlink:href="image.png" width="100" height="100"/> </svg>
渐变标签：
<svg width="100" height="100"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/> </linearGradient> </defs> <rect x="10" y="10" width="80" height="80" fill="url(#grad1)"/> </svg>
滤镜标签：
<svg width="100" height="100"> <defs> <filter id="blur"> <feGaussianBlur stdDeviation="5"/> </filter> </defs> <rect x="10" y="10" width="80" height="80" fill="orange" filter="url(#blur)"/> </svg>
