svg

作者: 冰点雨 | 来源:发表于2022-07-06 09:52 被阅读0次

svg双闭合标签,默认宽高300*150 必须在svg标签内绘制图形

画线 line

<!--x1,y1:第一个点的坐标   x2,y2:第二个点的坐标 -->
        <line x1="100" y1="100" x2="180" y2="200" stroke="red"></line>

绘制折线 polyline

<!-- 绘制折线 可以多个点,多个点用逗号隔开 -->
        <polyline points="100 200,200 100,100 40,40 70" fill-opacity="0" stroke="blue"></polyline>

绘制矩形 rect

 <!-- 绘制矩形  fill:设置填充颜色  fill-opacity:设置填充颜色透明度  stroke:线的颜色-->
        <rect x="100" y="100" width="180" height="100" fill="pink"></rect>

绘制圆形 circle

<!--
            绘制圆形
            cx cy:圆心坐标
            r:半径
         -->
        <circle cx="400" cy="100" r="50" style="stroke: cyan;fill:none"></circle>

绘制圆形|椭圆形 ellipse

<!--
            绘制圆形|椭圆形
            cx cy:圆心坐标
            rx:水平半径
            ry:垂直半径
         -->
        <ellipse cx="400" cy="200" rx="80" ry="40" style="stroke: cyan;fill:none"></ellipse>

多边形 polygon

<polygon points="600 100,300 400,750 100" fill-opacity="0" stroke="red"></polygon>

绘制任意图形 path

        <path fill-opacity="0" stroke="blue" d="
        M 10 10
        L 20 400
        L 30 120
        L 40 66
        L 58 99
        L 60 120
        L 78 99
        Z
        ">
        </path>

相关文章

  • Android图片之svg

    1.SVG是什么2.SVG优点3.SVG使用4.获取SVG5.封装使用6.SVG动画 1.SVG是什么? SVG(...

  • SVG的使用

    SVG图片 一. SVG介绍 1.1. SVG概念解析 SVG全称: Scalable Vector Graphi...

  • 资源

    SVG svg icon 对应git(node.js写的) svg animation study svg cs...

  • (第六天)HTML5之SVG的了解与使用&Web数据存储

    SVG 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用...

  • svg standalone

    简单的 SVG 实例 一个简单的SVG图形例子: 这里是SVG文件(SVG文件的保存与SVG扩展): "http:...

  • SVG学习笔记

    SVG学习笔记 简介 SVG使用XML来描述二维图形和绘图程序的语言。 SVG形状 SVG在HTML页面 SVG ...

  • SVG

    Menu SVG 实例 SVG 形状 SVG 实例 SVG 的 用来创建一个圆。cx 和 cy ...

  • SVG简介及其用法

    一、SVG - 基础 1.什么是SVG 2.SVG的优势 3.SVG与canvas的区别 4.用途 5.svg再将...

  • svg实例

    一个简单的SVG图形例子: 这里是SVG文件(SVG文件的保存与SVG扩展): SVG 代码解析: 第一行包含了 ...

  • SVG用法

    常见引入svg的方法 .svg文件的常见结构: html页面中绘制svg的常见方法: 关于SVG的viewBox:...

网友评论

      本文标题:svg

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