zoukankan      html  css  js  c++  java
  • 关于HTML5用SVG画图

    SVG在HTML5中的应用

    SVG(Scalable Vector Graphics)是用来绘制矢量图的HTML5标签。只要定义好XML属性就能够获得与其一致的图像元素。

     使用SVG之前先将标签加入到HTML body中。就像其他的HTML标签一样,你可以为SVG标签为之添加ID属性。也可以为之添加css样式,例如“border-style:solid;border-2px;”。SVG标签跟其它的HTML标签有通用的属性。你可以用height="100px" width="200px" 为其添加高度和宽度。

    一、      用SVG画线条:

    <svg id="svgLineTutorial" style="border-style:solid;border-2px;" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg">

         <line x1="10" y1="20" x2="100" y2="200" style="stroke:Green;stroke-2"/>

    </svg>

    其中:指定x1,y1,x2,y2值来代表起点终点坐标,在style属性中使用“stroke:Green;”为线条指定颜色。用stroke-2为线条设置宽度。

     

    二、      用SVG画圆:

    <svg id="svgCircleTutorial" height="250" xmlns="http://www.w3.org/2000/svg">

     <circle id="myCircle" cx="55" cy="55" r="50" fill="#219E3E" stroke="#17301D" stroke-width="2" />

    </svg>

    其中:圆的中心cx="55" cy="55",半径r="50",fill="#219E3E"填充颜色,stroke="#17301D" stroke-width="2"线条颜色与宽度

     

    三、      用SVG画矩形

    <svg id="svgRectangleTutorial" height="200" xmlns="http://www.w3.org/2000/svg">

        <rect id="myRectangle" width="300" height="100" stroke="#17301D" stroke-width="2"  fill="blue" fill-opacity="0.5" stroke-opacity="0.5"/>        

    </svg>

    其中:stroke="#17301D" stroke-width="2"定义边框的颜色和宽度

     

    四、      SVG画椭圆

    <svg id="svgEllipseTutorial" height="150" xmlns="http://www.w3.org/2000/svg">
        <ellipse id="myEllipse" cx="120" cy="60" rx="100" ry="50" style="fill:#3F5208;stroke:black;stroke-3"/>   
    </svg>

    其中:中心坐标cx="120" cy="60",长轴短轴半径 rx="100" ry="50"

     

    五、      SVG画多边形

    <svg id="svgPolygonTutorial" height="200" xmlns="http://www.w3.org/2000/svg">

        <polygon id="myPolygon" points="10,10 75,150 150,60" style="fill:blue;stroke:black;stroke-3"/>

    </svg>

    points="10,10 75,150 150,60"定义三个顶点(10,10),(75,150),(150,60)

     

    举例:

    <!DOCTYPE html>

    <html>

    <body>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">

      <polygon points="100,10 40,180 190,60 10,60 160,180"

      style="fill:lime;stroke:purple;stroke-5;fill-rule:evenodd;">

    </svg>

    </body>

    </html>

     

  • 相关阅读:
    Java实现 蓝桥杯VIP 算法提高 贪吃的大嘴
    Java实现 蓝桥杯VIP 算法提高 贪吃的大嘴
    Java实现 蓝桥杯VIP 算法提高 贪吃的大嘴
    Java实现 蓝桥杯VIP 算法提高 贪吃的大嘴
    Java实现 蓝桥杯VIP 算法提高 士兵排队问题
    Java实现 蓝桥杯VIP 算法提高 士兵排队问题
    Java实现 蓝桥杯VIP 算法提高 士兵排队问题
    Java实现 蓝桥杯VIP 算法提高 士兵排队问题
    Java实现 蓝桥杯VIP 算法提高 数字黑洞
    Minifilter微过滤框架:框架介绍以及驱动层和应用层的通讯
  • 原文地址:https://www.cnblogs.com/this-xiaoming/p/5530395.html
Copyright © 2011-2022 走看看