SVG六基本元素

时间：2022-09-25 00:12:20
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>svg 6 elements</title>

</head>

<body>

    <h1>Hello SVG 6 Elements</h1>

        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"  >

    <rect x="20" y="20" width="50" height="30" rx="5" ry='10'></rect>

    <circle cx="100" cy="20" r="10"></circle>

    <ellipse cx="150" cy="20" rx="10" ry="5"></ellipse>

    <line x1="100" y1="100" x2="110" y2="90" style='stroke:rgb(99,99,99);stroke-width:2'></line>

    <polygon points="100,100 150,150 139,123" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>

    <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>

</svg>

</body>

</html>

basic. svg

<svg xmlns="http://www.w3.org/2000/svg">

    <rect x="10" y="10" rx="5" ry="5" width="150" height="100" stroke="red" fill="none"></rect>

    <circle cx="250" cy="60" r="50" stroke="red" fill="none"></circle>

    <ellipse cx="400" cy="60" rx="70" ry="50" stroke="red" fill="none"></ellipse>

    <line x1="10" y1="120" x2="160" y2="220" stroke="red"></line>

    <polyline points="250 120 300 220 200 220" stroke="red" fill="none"></polyline>

    <polygon points="250 120 300 220 200 220" stroke="red" stroke-width="5" fill="yellow" transform="translate(150 0)"></polygon>

</svg>

SVG六基本元素的更多相关文章

  1. d3可视化实战01：理解SVG元素特性

    一. SVG简介 ————————————————————————————————————————————————————————————————— SVG是一种和图像分辨率无关的矢量图形格式,它使用 ...

  2. SVG基本图形

    SVG 是使用 XML 来描述二维图形和绘图程序的语言 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML ...

  3. 【D3】D3学习轨迹-----学习到一定层度了再更新

    1.  首先了解SVG的基本元素 http://www.w3school.com.cn/svg/ 2.  了解d3的专有名词  http://www.cnblogs.com/huxiaoyun90/p ...

  4. HTML--SVG基础

    一 SVG概述 SVG是Scalable Vector Graphics的缩写,即缩放式矢量图形; 优点: 1.使用编辑器即可编辑图形; 2.基于XML,SVG图形可以被很容易的搜索,脚本化和压缩; ...

  5. Python 和 C&sol;C&plus;&plus; 拓展程序如何性能优化？看这一篇文就够

    作者:王璐璐 | 旷视 MegEngine 架构师 一. 背景 在 MegEngine imperative runtime 的早期开发中,我们面临着一些的性能优化问题.除了一些已知需要重构的地方(早 ...

  6. SVG 学习&lt&semi;六&gt&semi; SVG的transform

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  7. o&&num;39&semi;Reill的SVG精髓（第二版）学习笔记——第六章

    第六章:坐标系统变换 想要旋转.缩放或者移动图片到新的位置.可以给对应的SVG元素添加transform属性. 6.1 translate变换 可以为<use>元素使用x和y属性,以在特性 ...

  8. svg学习（六）line

    <line> 标签用来创建线条. <?xml version="1.0" standalone="no"?> <!DOCTYPE ...

  9. HTML5学习&lpar;六&rpar;---------SVG 与Canvas

    参考教程:http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不 ...

随机推荐

  1. Oracle 介绍 （未完待续）

    关键字含义 1. DML.DDL.DCL DML----Data Manipulation Language 数据操纵语言例如:insert,delete,update,select(插入.删除.修改 ...

  2. 如何在OpenWRT环境下做开发

    1.搭建开发环境 首先,在执行make menuconfig后,会出现下图: 其中,图中红框部分是我定制路由器的系统版本,大家可以根据不同的路由器进行不同的选择:绿框部分表示我们需要编译一个SDK开发 ...

  3. sql server 存储过程、事务，增删改

    CREATE procedure [dbo].[sp_TableSave] @TypeID tinyint, -- 0 新增,1 修改,2 删除 @ID int, ), ), ), @UID int, ...

  4. springboot&plus;springmvc&plus;mybatis项目整合

    介绍: 上篇给大家介绍了ssm多模块项目的搭建,在搭建过程中spring整合springmvc和mybatis时会有很多的东西需要我们进行配置,这样不仅浪费了时间,也比较容易出错,由于这样问题的产生, ...

  5. 搭建sftp

    参考:https://www.cnblogs.com/heyanan/p/8178480.html 需要注意两点:1.链接时候选择sftp不要选择ftp 2.目录权限严格按照参考文章设置

  6. 【Python】socket模块应用

    [Socket] 本文记录了一些socket模块的简单应用,对于具体原理还没来得及深究. ■ 利用socket模块进行端口连接验证和扫描 在linux中常用nc命令来进行远端端口是否开放的验证.但是这 ...

  7. 20181101noip模拟赛T1

    思路: 我们看到这道题,可以一眼想到一维差分 但这样的复杂度是O(nq)的,显然会T 那么怎么优化呢? 我们会发现,差分的时候,在r~r+l-1的范围内 差分增加的值横坐标相同,纵坐标递增 减小的值横 ...

  8. Steve Lin&colon;如何撰写一篇优秀的SIGGRAPH论文

     英文原版 PPT下载:http://vdisk.weibo.com/s/z7VKRh2i3R4YO 一篇优秀的论文应该是这样的 广大的研究同仁介绍了这篇论文所包含的重要想法和所获得的结果 在论文中描 ...

  9. seleenium与Vs结合

    Vs 自带自动化测试录制工具.selenium则是开源的大众工具.在使用发现vs 自带的工具录制方便,但是修改很难.但是可以提供后续的BUG管理和邮件通知,自动构建等功能.selenium在.net平 ...

  10. Java的引用StrongReference、 SoftReference、 WeakReference 、PhantomReference

    1. Strong Reference StrongReference 是 Java 的默认引用实现,  它会尽可能长时间的存活于 JVM 内, 当没有任何对象指向它时 GC 执行后将会被回收 @Te ...

相关文章