当前位置：文江博客知识库简体中文文档 SVG_In_HTML_Introduction

SVG In HTML Introduction - SVG 编辑

概述

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

源码

源码如下：查看示例

<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>设置一个invalid属性，样式规则将渐变颜色的end-stop颜色设置为红色（另一个样式规则用于展示错误提示信息）

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

我们单独举出了一个可能存在的网站构成部分——表单，并为其添加了吸引人的、交互性的背景
该方法通过不展示背景图片的方式，向后兼容了不支持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背景中的位置。

SVG In HTML Introduction - SVG 编辑

概述

源码

讨论

细节

相关链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

词条统计

友情链接

SVG In HTML Introduction - SVG 编辑

概述

源码

讨论

细节

相关链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

词条统计

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。