MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

SVG In HTML Introduction

概述

该文章及其相关举例展示了如何使用内联的SVG给一个表单提供背景图片,它展示了如何按照编写常规XHTML代码相同的方式来通过JavaScript 和 CSS 操作图片。注意,该举例仅在支持XHTML(不是HTML)并集成了SVG的浏览器中正常工作。

源码

举例:the example,源码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XTech SVG Demo</title>
<style>
  stop.begin { stop-color:yellow; }
  stop.end { stop-color:green; }
  body.invalid stop.end { stop-color:red; }
  #err { display:none; }
  body.invalid #err { display:inline; } 
</style>
<script>
  function signalError() {
    document.getElementById('body').setAttribute("class", "invalid");
  }
</script>
</head>
<body id="body"
  style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;">
<form>
  <fieldset>
    <legend>HTML Form</legend>
    <p><label>Enter something:</label>
    <input type="text"/>
    <span id="err">Incorrect value!</span></p>
    <p><input type="button" value="Activate!" onclick="signalError();" /></p>
  </fieldset>
</form>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
  viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
  style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
  <linearGradient id="gradient">
    <stop class="begin" offset="0%"/>
    <stop class="end" offset="100%"/>
  </linearGradient>
  <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
  <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
</svg>
</body>
</html>

讨论

该页面主要为常规的XHTML、CSS和Javascript,它包含了有趣的<svg>部分。这个元素及其子元素在SVG命名空间中被生命,该元素包含一个渐变和两个渐变填充的形状。该渐变颜色的终值颜色由CSS设置,当用户在表单中输入了错误信息,脚本会给<body>设置一个无效标签,并将渐变颜色的终值颜色设置位红色(另一个样式规则用于展示错误提示信息)

该方法有如下几点需要注意:

  • 我们单独举出了一个可能存在的网站构成部分——表单,并为其添加了吸引人的、交互性的背景
  • 该方法通过不展示背景图片的方式,向后兼容了不支持SVG的浏览器
  • 它非常简单且运行良好
  • 这个图片能够智能的自动适应其需要的大小
  • 我们可以给HTML和SVG都显式声明样式规则
  • 相同的脚本同事操作了HTML和SVG
  • 该文档完全符合标准

如果需要给一个内嵌的SVG元素通过DOM方法添加一个有外链的图片,我们需要使用setAttributeNS来设置外链地址href。如下:

 var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png"); 
 

细节

viewBox属性创建了一个与SVG图片坐标系相关联的逻辑坐标系,通过这种方式我们的图片被放置到了一个100x100的视觉系中。

preserveAspectRatio属性指定了需要预设的数据,即指定了再有效大小内图片的居中、适配图片最大宽高,并裁切掉了多余部分。

样式属性指定了SVG在form背景中的位置。

  • Another SVG in XHTML example: A swarm of motes
  • Working example 可以同时工作在安装有Adobe SVG Viwer的Mozilla和IE浏览器中。 (对于同时工作在Firefox和IE浏览器中得内联SVG,需要为每个浏览器的服务文档设置不同的Cotent-type。因为当你基于一个代理服务器获取页面的时候,如果在第二个浏览器中加载该案例将会失败,因其会获取错误的Content-Type)

文档标签和贡献者

标签: 
 此页面的贡献者: zldream1106, lunix01
 最后编辑者: zldream1106,