这是第一个实例,其中讲了如何新建svg,添加元素,保存svg document,查看svg.
下面将附上常用一些元素的添加方法:(为js的,但基本上跟java中操作一样,就是类名有点细微差别)
Circle
var svgns = "http://www.w3.org/2000/svg";
function makeShape(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var shape = svgDocument.createElementNS(svgns, "circle");
shape.setAttributeNS(null, "cx", 25);
shape.setAttributeNS(null, "cy", 25);
shape.setAttributeNS(null, "r", 20);
shape.setAttributeNS(null, "fill", "green");
svgDocument.documentElement.appendChild(shape);
}
Ellipse
var svgns = "http://www.w3.org/2000/svg";
function makeShape(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var shape = svgDocument.createElementNS(svgns, "ellipse");
shape.setAttributeNS(null, "cx", 25);
shape.setAttributeNS(null, "cy", 25);
shape.setAttributeNS(null, "rx", 20);
shape.setAttributeNS(null, "ry", 10);
shape.setAttributeNS(null, "fill", "green");
svgDocument.documentElement.appendChild(shape);
}
Line
var svgns = "http://www.w3.org/2000/svg";
function makeShape(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var shape = svgDocument.createElementNS(svgns, "line");
shape.setAttributeNS(null, "x1", 5);
shape.setAttributeNS(null, "y1", 5);
shape.setAttributeNS(null, "x2", 45);
shape.setAttributeNS(null, "y2", 45);
shape.setAttributeNS(null, "stroke", "green");
svgDocument.documentElement.appendChild(shape);
}
Path
var svgns = "http://www.w3.org/2000/svg";
function makeShape(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var shape = svgDocument.createElementNS(svgns, "path");
shape.setAttributeNS(null, "d", "M5,5 C5,45 45,45 45,5");
shape.setAttributeNS(null, "fill", "none");
shape.setAttributeNS(null, "stroke", "green");
svgDocument.documentElement.appendChild(shape);
}
Polygon
var svgns = "http://www.w3.org/2000/svg";
function makeShape(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
shape = svgDocument.createElementNS(svgns, "polygon");
shape.setAttributeNS(null, "points", "5,5 45,45 5,45 45,5");
shape.setAttributeNS(null, "fill", "none");
shape.setAttributeNS(null, "stroke", "green");
svgDocument.documentElement.appendChild(shape);
}
Polyline
var svgns = "http://www.w3.org/2000/svg";
function makeShape(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
shape = svgDocument.createElementNS(svgns, "polyline");
shape.setAttributeNS(null, "points", "5,5 45,45 5,45 45,5");
shape.setAttributeNS(null, "fill", "none");
shape.setAttributeNS(null, "stroke", "green");
svgDocument.documentElement.appendChild(shape);
}
Rectangle
var svgns = "http://www.w3.org/2000/svg";
function makeShape(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var shape = svgDocument.createElementNS(svgns, "rect");
shape.setAttributeNS(null, "x", 5);
shape.setAttributeNS(null, "y", 5);
shape.setAttributeNS(null, "width", 40);
shape.setAttributeNS(null, "height", 40);
shape.setAttributeNS(null, "fill", "green");
svgDocument.documentElement.appendChild(shape);
}
Rounded Rectangle
var svgns = "http://www.w3.org/2000/svg";
function makeShape(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var shape = svgDocument.createElementNS(svgns, "rect");
shape.setAttributeNS(null, "x", 5);
shape.setAttributeNS(null, "y", 5);
shape.setAttributeNS(null, "rx", 5);
shape.setAttributeNS(null, "ry", 5);
shape.setAttributeNS(null, "width", 40);
shape.setAttributeNS(null, "height", 40);
shape.setAttributeNS(null, "fill", "green");
svgDocument.documentElement.appendChild(shape);
}
Use
var svgns = "http://www.w3.org/2000/svg";
var xlinkns = "http://www.w3.org/1999/xlink";
function makeShape(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var svgRoot = svgDocument.documentElement;
var defs = svgDocument.createElementNS(svgns, "defs");
var rect = svgDocument.createElementNS(svgns, "rect");
rect.setAttributeNS(null, "id", "rect");
rect.setAttributeNS(null, "width", 15);
rect.setAttributeNS(null, "height", 15);
rect.setAttributeNS(null, "style", "fill: green");
defs.appendChild(rect);
var use1 = svgDocument.createElementNS(svgns, "use");
use1.setAttributeNS(null, "x", 5);
use1.setAttributeNS(null, "y", 5);
use1.setAttributeNS(xlinkns, "xlink:href", "#rect");
use2 = svgDocument.createElementNS(svgns, "use");
use2.setAttributeNS(null, "x", 30);
use2.setAttributeNS(null, "y", 30);
use2.setAttributeNS(xlinkns, "xlink:href", "#rect");
svgRoot.appendChild(defs);
svgRoot.appendChild(use1);
svgRoot.appendChild(use2);
}
分享到:
相关推荐
npm install svg.js svgdom // returns a window with a document and an svg root node const { createSVGWindow } = require ( 'svgdom' ) const window = createSVGWindow ( ) const SVG = r
gulp-svg2el Gulp 插件将传递的 HTML 转换为 Javascript $ npm install gulp-...该插件会转义源 HTML 中的所有相关字符,将制表符/空格折叠为单个空格并修剪结果以输出有效的 SVG DOM 元素。 ,由编写,用于项目 。
DOM到SVG 用于将给定HTML DOM节点转换为可访问的SVG“屏幕截图”的库。 演示版 :camera_with_flash: 试用,该使用此库可让您获取任何网页的SVG屏幕截图。 您可以在找到源代码。 用法 import { documentToSVG , ...
使用HTML5 canvas和svg从DOM节点生成可打印的分页pdf
橙色用于将SVG生成为DOM元素或字符串的库。 该库的功能有限(主要是因为它是由另一个不使用所有SVG元素的库创建的),但是您可以在项目中对其进行扩展。 您可以通过命令npm run build来构建此库以供静态前端使用(您...
一个将SVG注入DOM的React组件。 | | | | | 背景 假设您在某些URL上可以使用SVG,并且,您希望将其注入DOM。 该模块通过将过程委派给来为您完成繁重的工作,该过程向发出AJAX请求,然后内联交换SVG标记。 异步加载...
svg api(JavaScript) 这个文档比较详细
SVG64 随时随地将SVG转换为base64关于如果像我一样,在开发时使用了大量的SVG,则可能已经到了需要将SVG用作背景图像或嵌入到javascript文件中的地步。 唯一的方法是将SVG文件转换为base64字符串,然后在需要时使用...
浏览器环境 使用模拟全局浏览器环境。 这使您可以轻松或不费劲地在Node.js 6或更高版本... jsdom明确jsdom 。 在某些情况下,这可能适合您的用例,但请仔细阅读链接的Wiki页面,并确保您了解警告。 如果您不需要全局启
css grid布局+原生js操作dom动态生成围棋棋盘 之前写的过于简陋了 目前站台不支持删除 不要下载了
path-slider.js是一款基于SVG路径运动的js轮播插件。该js轮播插件可以根据指定的SVG路径,分布排列多个DOM元素,然后使这些DOM元素在SVG路径上执行轮播动画。
一个用于 SVG 元素创建和操作的精简 JavaScript 库。 哲学 与 CommonJS 打包器一起使用 为 SVG DOM 元素提供类层次结构 根据需要添加功能 安装 npm install vecs 用法 var vecs = require ( "vecs" ) ; var svg = ...
web网页端全屏截图,支持svg截图 支持高级浏览器 先遍历svg元素转换为dom元素 在通过html2canvas.js直接调用 没有svg的情况下 直接调用html2canvas的方法 $("#btn").click(function() { html2canvas($("#box"), { ...
说明:为了方便下载本人已压缩 参考手册 ...XHTML 1.0 CSS 2.0 JavaScript VBScript HTML DOM XML DOM ASP reference ...XML DOM 实例 ...JavaScript 实例 ...SVG 实例 XSLT 1.0 XPath 2.0 XSL-FO WML 1.1 HTML 颜色
将所有链接的 SVG 图像替换为用于 DOM/CSS 操作的内联版本。 可用作导出单个函数 (SVGInliner) 的 UMD 模块,该函数将可选的 CSS 选择器作为参数。 默认行为会转换在页面上找到的所有 SVG 图像。 尚未(尚未)在 ...
该dom.js文件为非浏览器环境下的js实现了完整的dom API,让我们在服务器端操作dom成为可能。比如利用svg技术,在后端生成图片。
SVG.js是一个轻量级的JavaScript库,允许你轻松操作SVG和定义动画。 SVG(Scalable Vector Graphics,可缩放矢量图形)是基于XML、用于描述二维矢量图形的一种图形格式。SVG由W3C制定,是一个开放标准。
SVGEditor是一个最小JavaScript,基于d3的SVG编辑器(duh),可安装到SVG <path> , 和其他对象中以使其可编辑。 它将更改直接复制到SVG DOM中,从而在浏览器中形成可下载的格式正确的SVG。 或至少它会在完成时...
dom-to-pdf使用HTML5 canvas和svg从DOM节点生成可打印的PDF。 安装 npm install --save dom-to-pdf 用法 var domToPdf = require ( 'dom-to-pdf' ) ; var element = document . getElementById ( 'test' ) ; var ...