如何在HTML5中使用SVG

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在HTML5中使用SVG相关的知识，希望对你有一定的参考价值。

　　
　　SVG 即 Scalable Vector Graphics，是一种用来绘制矢量图的 html5 标签。你只需定义好XML属性，就能获得一致的图像元素。
　　使用SVG之前先将标签加入到HTML body中。就像其他的HTML标签一样，可以为SVG标签为之添加ID属性。也可以为之添加css样式，例如“border-style:solid;border-width:2px;”。SVG标签跟其它的HTML标签有通用的属性。将SVG元素加入到HTML代码中，SVG提供很多绘图形状，例如线条、圆、多边形等。

　　SVG线条：
　　SVG线条用标签定义，在此标签内你还可以定义其他的属性。
　　该标签包括像起点坐标(x1,y1)和终点坐标(x2,y2)这样的属性。指定x1,y1,x2,y2值来设定起点终点坐标。在指定好坐标后，可以为之添加一些样式，在style属性中使用“stroke:Green;”为线条指定颜色。同样也可以用stroke-width:2为线条设置宽度。
　　代码1：使用SVG画线
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
</head>
<body>
<h2>HTML5 SVG Line Example</h2>
<svg id="svgLineTutorial" style="border-style:solid;border-width:2px;" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg">
<!--<line x1="0" y1="0" x2="50" y2="200" style="stroke:rgb(100,100,0);stroke-width:5"/>-->
<line x1="10" y1="20" x2="100" y2="200" style="stroke:Green;stroke-width:2"/>
</svg>
</body>
</html>
　　
　　
　　SVG画圆：
　　SVG提供了一种不同的标签来画圆。正如你看到的下面代码，circle有个id为myCircle。为了定义圆的中心以及半径，使用cx="55" cy="55"以及r="50"属性分别定义。使用fill="#219E3E"为圆填充颜色。同样你可以用stroke="#17301D" stroke-width="2"定义圆周线条颜色和宽度。
　　
　　代码2:使用SVG画圆
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
</head>
<body>
<h2>HTML5 SVG Circle Example</h2>
<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>
</body>
</html>
　　
　　
　　SVG矩形:
　　同样的使用标签来画矩形，我们同样设置了 id 属性 “myRectangle” ,用 width="300" height="100" 定义高宽，使用 fills 属性定义填充颜色。用 strock 定义边框。还有一点需要注意，我用 fill-opacity="0.5" stroke-opacity="0.5" 为 stroke 和 filling 都添加了透明度。
　　代码3:SVG画矩形
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Rectangle Example</h2>
<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="#0E4E75" fill-opacity="0.5" stroke-opacity="0.5"/>
</svg>
</body>
</html>
　　
　　
　　SVG椭圆：
　　同样是用标签来绘制椭圆。设置其 id="myEllipse" ，给定起中心坐标 cx="120"cy="60"，长轴短轴半径 rx="100" ry="50",并用设置填充颜色、边框宽度以及边框颜色style="fill:#3F5208;stroke:black;stroke-width:3"。
　　代码4:SVG画椭圆
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Ellipse Example</h2>
<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-width:3"/>
</svg>
</body>
</html>　　
　　
　　SVG多边形：
　　使用特定标签绘制多边形,points属性用来定义多边形的几个顶点，用左边对来定义，形如 points="10,10 75,150 150,60" ，这里定义了三个顶点(10,10),(75,150),(150,60)。同上面一样，用 style="fill:#63BCF7;stroke:black;stroke-width:3" 定义多边形填充颜色、边框以及边框宽度。
　　代码5：SVG画多边形
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polygon Example</h2>
<svg id="svgPolygonTutorial" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon id="myPolygon" points="10,10 75,150 150,60" style="fill:#63BCF7;stroke:black;stroke-width:3"/>
</svg>
</body>
</html> 参考技术A SVG 即 Scalable Vector Graphics，是一种用来绘制矢量图的 HTML5 标签。你只需定义好XML属性，就能获得一致的图像元素。
使用SVG之前先将标签加入到HTML body中。就像其他的HTML标签一样，你可以为SVG标签为之添加ID属性。也可以为之添加css样式，例如“border-style:solid;border-width:2px;”。SVG标签跟其它的HTML标签有通用的属性。你可以用height="100px" width="200px" 为其添加高度和宽度。
现在就将SVG元素加入到我们HTML代码中，SVG提供很多绘图形状，例如线条、圆、多边形等。
SVG线条：
SVG线条用标签定义，在此标签内你还可以定义其他的属性。
该标签包括像起点坐标(x1,y1)和终点坐标(x2,y2)这样的属性。指定x1,y1,x2,y2值来设定起点终点坐标。在指定好坐标后，可以为之添加一些样式，在style属性中使用“stroke:Green;”为线条指定颜色。同样你也可以用stroke-width:2为线条设置宽度。
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
</head>
<body>
<h2>HTML5 SVG Line Example</h2>
<svg id="svgLineTutorial" style="border-style:solid;border-width:2px;" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg">
<!--<line x1="0" y1="0" x2="50" y2="200" style="stroke:rgb(100,100,0);stroke-width:5"/>-->
<line x1="10" y1="20" x2="100" y2="200" style="stroke:Green;stroke-width:2"/>
</svg>
</body>
</html> 参考技术B svg跟html标签一样使用就可以了，<div><svg><path></path></svg></div>

或者你也可以直接在百度搜索《如何在HTML5中使用SVG》第一条就说得很详细，用SVG画直线，画圆，椭圆，矩形。里面都有详细的介绍；本回答被提问者和网友采纳

如何读取和更改使用 html 或 xhtml 中的图像标签包含的 svg 文件中的元素？ [复制]

【中文标题】如何读取和更改使用 html 或 xhtml 中的图像标签包含的 svg 文件中的元素？ [复制]【英文标题】：How to read and change elements inside the svg file included using image tag in html or xhtml? [duplicate] 【发布时间】：2019-05-12 09:08:31 【问题描述】：

我使用以下标签在 xhtml 或 html 文件中包含 SVG 文件：

<ImageTexture id='colors' containerField='diffuseTexture'   url='http://localhost:3000/system/colorways/images/000/000/015/original/ShirtWithSolidColor03.svg?1544447759'></ImageTexture>

或

<image src="http://localhost:3000/system/colorways/images/000/000/015/original/ShirtWithSolidColor03.svg?1544447759">

因此 svg 会在视图上正确呈现到 xhtml 或 html 文件中。 但是我想更改 svg 文件中存在的路径标记样式填充的属性是他们使用 xhtml 或 html 中包含的 jquery 或 javascript 读取 svg 文件的任何方式。 我正在使用 ruby​​ on rails 进行开发。在此先感谢

【问题讨论】：

【参考方案1】：

你不需要包含它，改变它然后再包含它。

1) 加载您的 SVG 文件并覆盖 fill 属性和值。

2) 将 SVG 插入图像中。

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <img>
  <script>
    const xhr = new XMLHttpRequest()
    xhr.open('GET', '/image.svg')

    xhr.onload = () => 
      if (xhr.status != 200) return;

      const svg = xhr.response
        .replace(/fill.+;/g, 'fill:blue')

      document.querySelector('img').src =    
        `data:image/svg+xml;charset=utf-8,$svg`
    

    xhr.send()
  </script>
</body>
</html>

希望有帮助:)

【讨论】：

是的，用实际的 svg 替换图像标签后，可以使用 jquery 更改图像。谢谢，但我想用 x3d 标签的 xhtml 做这些更改，其中图像标签类似于 ，感谢您的建议【参考方案2】：

你必须把svg带入内联，然后随意修改。

<img class="svgClass" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"></img>

<script>
  document.addEventListener("click", function() 
    var el = document.querySelectorAll("img");
    var e = el[0]; //or iterate
    var xhr = new XMLHttpRequest();
    xhr.open("GET", e.getAttribute("src"));
    xhr.send();
    xhr.onreadystatechange = function() 
        if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) e.outerHTML = xhr.responseText;

//svg is inline, access/modify as usual
        var elements = document.querySelectorAll('*[fill]');
        for (var i = 0; i < elements.length; i++)
            if(elements[i].getAttribute('fill') != "#FFF")
                elements[i].setAttribute('fill', "#F00");
                elements[i].setAttribute('stroke', "#F00");
            
        
    ;
  );
</script>

【讨论】：

是的，用实际的 svg 替换图像标签后，可以使用 jquery 更改图像。谢谢，但我想用 x3d 标签的 xhtml 做这些更改，其中图像标签类似于 ，感谢您的建议

以上是关于如何在HTML5中使用SVG的主要内容，如果未能解决你的问题，请参考以下文章

如何在 html5 中显示 SVG 圆圈内的图像？

HTML5 - 如何获取 SVG 文本元素的中心点？

如何在 Web 浏览器中以图形方式显示商场中可用的商店或如何从 Flash 切换到 HTML5 和 SVG

如何将 SVG 文件转换为 HTML5 的画布？

如何在浏览器中为 SVG 动画添加硬件加速？

SVG 与 HTML5 的 canvas 各有啥优点，哪个更有前途