当前位置：网站首页>An article taught you to use HTML5 SVG tags

An article taught you to use HTML5 SVG tags

2020-11-06 20:48:00 【Python advanced】

5 Line code , Can let wechat small program on the shelf to their own APP in | Register and send it to Dajiang 、 Huawei 、 Cherry keyboard ！>>>

【 One 、 Project background 】

SVG Represent scalable vector graphics , This is a door used to describe 2D The language of graphics , Graphic applications use XML To write , then XML from SVG Reader program rendering . Supports three types of graphic objects ： Vector graphics shapes （ for example , A path of straight lines and curves ）, Images and text . Graphic objects can be grouped , The style is set , Conversion and synthesis . The feature set includes nested transformations , Cutting paths ,Alpha Mask , Filter effects and template objects ..

SVG stay 2003 year 1 month 14 Day to day W3C Recommended standards , You can SVG standard View the latest version of SVG standard .

【 Two 、 How to check SVG file ？】

majority Web Browsers can display SVG, It's like they can show PNG,GIF as well as JPG graphics .IE Users may need to install Adobe SVG Reader so that you can view it in the browser SVG.

【 3、 ... and 、HTML5 Embedded in SVG】

HTML5 Allow us to use... Directly _...</svg> Tag insertion SVG,

Simple grammar ：

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

expand ：

FireFox 3.7 It also introduces a configuration option （"about:config"）, You can enable HTML5：

  1. stay FireFox Enter... In the address field about:config.

  2. Click where the warning message appears “I'll be careful, I promise!” Button （ Make sure you follow it ）.

  3. Enter... In the filter at the top of the page html5.enable.

  4. Default may be disabled , So click it to switch it to a value of true.

【 Four 、 Actual case 】

1. SVG round

Here's a SVG Example HTML5 edition , use <circle> Label draws a circle ：

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Circle</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
</body>
</html>

Enable HTML5 The latest edition FireFox The following results will be generated in ：

2. SVG rectangular

Here's a SVG Example HTML5 edition , use <rect> Label draws a rectangle ：

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Rectangle</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect id="redrect" width="300" height="100" fill="red" />
</svg>
</body>
</html>

In the activation of HTML5 The latest edition FireFox The following results will be generated in ：

3. SVG line

Here's a SVG Example HTML5 edition , use <line> The label draws a line ：

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Line</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="200" y2="100"
          style="stroke:red;stroke-width:2"/>
</svg>
</body>
</html>

You can use style Property to set additional style information for it , Like strokes , Fill color , Stroke width and so on .

In the activation of HTML5 The latest edition FireFox The following results will be generated in ：

It's easy to learn the concept - Please use FireFox 3.7 Or later for online practice .

4. SVG The ellipse

Here's a SVG Example HTML5 edition , use <ellipse> Draw an ellipse label ：

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Ellipse</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
</svg>
</body>
</html>

In the activation of HTML5 The latest edition FireFox The following results will be generated in ：

It's easy to learn the concept - Please use FireFox 3.7 Or later for online practice .

5. SVG polygon

Here's a SVG Example HTML5 edition , use <polygon> Label draws a polygon ：

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polygon</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <polygon  points="20,10 300,20, 170,50" fill="red" />
</svg>
</body>
</html>

Enable HTML5 The latest edition FireFox The following results will be generated in ：

6. SVG Broken line

<polyline> Element is used to draw connected lines . Here's a SVG Example HTML5 edition , use <polyline> The label draws a line chart ：

<html>
   <title>SVG Broken line </title>
   <body>

      <h1> Simple SVG Broken line picture </h1>

      <svg width="800" height="800">
         <g>
            <text x="0" y="15" fill="black" >Polyline #1: Without opacity.</text>

            <polyline points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
            stroke="black" stroke-width="3" fill="none"></polyline>
         </g>
      </svg>

   </body>
</html>

In the activation of HTML5 The latest edition FireFox The following results will be generated in ：

7. SVG The gradient

Here's a SVG Example HTML5 edition , use <ellipse> Draw an ellipse label , Use <radialGradient> A label defines a SVG Radial Gradient .

We can use... In a similar way <linearGradient> Tag creation SVG Linear gradient .

<!DOCTYPE html>

<head>
  <title>SVG</title>
  <meta charset="utf-8" />
</head>

<body>
  <h2>HTML5 SVG Gradient Ellipse</h2>
  <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:rgb(200,200,200);
      stop-opacity:0" />
        <stop offset="100%" style="stop-color:rgb(255,0,0);
          <!-- The color is red -->
      stop-opacity:1" />
      </radialGradient>
    </defs>
    <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" />
  </svg>
</body>

</html>

In the activation of HTML5 The latest edition FireFox The following results will be generated in ：

【 5、 ... and 、 summary 】

1、 Explained Html in svg, Some difficulties encountered are analyzed and solutions are provided . Welcome to try , Sometimes it's easy to see someone else do it , But when it comes to doing it yourself , There will always be all kinds of problems , Don't hold your eyes high or your hands low , Do it frequently , Can understand more deeply .

2、 The code is simple , I hope it will help you with your study .

Want to learn more Python Web crawler and data mining knowledge , Go to a professional website ：http://pdcfighting.com/

Want to learn more Python Web crawler and data mining knowledge , Go to a professional website ：http://pdcfighting.com/

版权声明
本文为[Python advanced]所创，转载请带上原文链接，感谢

边栏推荐

猜你喜欢

随机推荐