Svg基础

<!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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值