HTML中使用SVG与SVG预定义形状元素的介绍是怎样的

这期内容当中小编将会给大家带来有关HTML中使用SVG与SVG预定义形状元素的介绍是怎样的，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

创新互联专注于企业网络营销推广、网站重做改版、太康网站定制设计、自适应品牌网站建设、H5场景定制、商城网站开发、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为太康等各大城市提供网站开发制作服务。

SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object>或者<iframe>。

代码如下:

<embed src="rect.svg" width="300"height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"/>

pluginspage 属性指向下载插件的 URL。

代码如下:

<object data="rect.svg"width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/"/>
<iframe src="rect.svg" width="300"height="100">
</iframe>

在这三个中<iframe>是比较早期的标签，现在用的比较的少了。用的较多的还是<embed>标签。
同时我们也可以将svg直接写入HTML文件中：
这样的话需要先引入SVG的dtd文件：

代码如下:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

再在<svg>标签中填入需要的代码：

代码如下:

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg" onclick="ccc();">
<ellipse cx="240" cy="100" rx="220" ry="30"
/>
<ellipse cx="220" cy="100" rx="190" ry="20" id="w1"
/>
</svg>

如果svg代码在html中，我们就更容易写javascript来控制图形的变换：

代码如下:

<script type="text/javascript">
function ccc(){
var a = document.getElementById("w1");
a.style.fill="red";
a.setAttribute("cx", "150"); //设置值
a.setAttribute("ry", "50"); //设置值
}
</script>

下面介绍一些svg的预定义的形状元素：
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>

上述就是小编为大家分享的HTML中使用SVG与SVG预定义形状元素的介绍是怎样的了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。

文章名称：HTML中使用SVG与SVG预定义形状元素的介绍是怎样的
网站链接：https://www.cdcxhl.com/article42/ispohc.html

成都网站建设公司_创新互联，为您提供全网营销推广、云服务器、外贸建站、网站改版、虚拟主机、品牌网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联