Svg基础

深林最里人已无

已于 2023-05-12 16:49:05 修改

阅读量42

点赞数

分类专栏： svg 文章标签： css html css3

于 2023-05-12 14:18:34 首次发布

本文链接：https://blog.csdn.net/weixin_56490825/article/details/130641389

版权

svg 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<body>
<!-- 矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path> -->

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <!-- 
        rect 元素的 width 和 height 属性可定义矩形的高度和宽度
        style 属性用来定义 CSS 属性
        CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
        CSS 的 stroke-width 属性定义矩形边框的宽度
        CSS 的 stroke 属性定义矩形边框的颜色
        
        x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
        y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
        CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
        CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）

        CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。

        rx 和 ry 属性可使矩形产生圆角。
     -->
 <rect width="300" height="100" rx="50" ry="20" 
 style="fill:green; stroke-width:1px;stroke:blue; fill-opacity:0.5;stroke-opacity:0.9"/>

</svg>
<br>
<svg>
    <!-- cx cy 为0 圆心从（0，0）点开始 -->
 <circle cx="100" cy="50" r="50" style="fill:blueviolet; stroke:chocolate;stroke-width:3px"/>
</svg>
<br>
<svg>
    <ellipse cx="100" cy ="80" rx="100" ry="50" style="stroke: crimson;stroke-width:2px;fill:blue"/>

    <line x1="0" y1="80" x2="200" y2="80" style="stroke:darkgoldenrod;stroke-width:10" />
        <!-- x1 x2 横轴开始结束  y1 y2 纵轴开始结束 -->
</svg>
<br>
<svg style="border: solid 1px; width:500px;height:500px">
    <!-- points 属性定义多边形每个角的 x 和 y 坐标  例如 x,y   -->
   <!-- 上1 下1 中2 中1 下2 -->
    <polygon points="150,150 100,380 250,240 50,240 200,380"   
    style="fill:lime;stroke:purple;stroke-width:1">
    
</svg>
<br>
<svg style="border: solid 1px; width:500px;height:500px">
    <polyline points="20,20 20,40 60,40 60,80 100,80" style="fill:none;stroke:black;stroke-width:3"/>
</svg>
<br> 
<!-- M = moveto  开始
L = lineto    划线
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve  弧线
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath -->
<!-- 所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。 -->

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M150 0 L75 200 L225 200 Z" />
</svg>
<br>
<!-- 初始点为参考 计算下一个点的位置 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450" >
    <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
      <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
      <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
      <path id="line" d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
      <!-- Mark relevant points -->
      <g stroke="black" stroke-width="3" fill="black">
        <circle id="pointA" cx="100" cy="350" r="3" />
        <circle id="pointB" cx="250" cy="50" r="3" />
        <circle id="pointC" cx="400" cy="350" r="3" />
      </g>
      <!-- Label the points -->
      <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle">
        <text x="100" y="350" dx="-30">A</text>
        <text x="250" y="50" dy="-10">B</text>
        <text x="400" y="350" dx="30">C</text>
        <text x="10" y="100" style="fill:red;">
            <textPath xlink:href="#line">I love SVG I love SVG</textPath>
          </text>
      </g>
      
 </svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450" >
    <g>
        <text x="0" y="10" fill="green">b</text>
        <text x="10" y="10" fill="black">I love SVG</text>
    </g>
    <text x="0" y="25" fill="red">b</text>
    <line x1="0" y1="80" x2="200" y2="80" style="stroke:darkgoldenrod;stroke-width:1" />

    <text x="20" y="85" fill="red" transform="rotate(20 20,40)">I love SVG</text>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450" >
    <g fill="none">
        <!-- stroke-linecap   butt round(两头变成圆弧状) square（加长） stroke-linecap 属性制定了，在开放子路径被设置描边的情况下，用于开放自路径两端的形状。
            stroke-dasharray -->
        <path stroke="red" d="M5 20 l215 0" /> 
        <!-- L = lineto    划线    绝对定位-->
        <path stroke="blue" d="M5 40 l215 0" />
        <path stroke="black" d="M5 60 l215 0" />
        <path stroke="black" d="M5 80 l215 0" />
        <g stroke="red" stroke-width="6" fill="red" >
            <path stroke-linecap="butt" d="M5 100 l215 0"/>
            <path stroke-linecap="round" d="M5 120 l215 0"/>
            <path stroke-linecap="square" d="M5 140 l215 0"/>
        </g>
        <g stroke="black" stroke-width="5">
            <path stroke-dasharray="1,1" d="M5 160 l215 0"/>
            <path stroke-dasharray="2,2" d="M5 180 l215 0"/>
            <path stroke-dasharray="20,10,5,5,5,10" d="M5 200 l215 0"/>
        </g>
        
      </g>
</svg>

</body>
</html>