<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
<meta charset="utf-8" />
</head>
<body>
<div id="contains">
</div>
<!--
折线:
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>
路径:
<path d="M250 150 L150 350 L350 350 Z" />
水平渐变的椭圆:
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
放射性渐变的椭圆:
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
当用户在圆上点击时,使用js创建一个元素:
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<script>
function create_a(evt)
{
var SVGDoc=evt.getTarget().getOwnerDocument();
var txt=SVGDoc.getElementById("txt");
var link=SVGDoc.createElement("a");
var text_node=SVGDoc.createTextNode("LINK");
link.setAttributeNS(
"http://www.w3.org/1999/xlink",
"xlink:href",
"http://www.w3schools.com");
link.appendChild(text_node);
txt.appendChild(link);
}
</script>
<text id="txt" x="10" y="10">Click on the circle to create a ....</text>
<circle cx="20" cy="40" r="1.5em" style="fill:blue" onclick="create_a(evt)"/>
</svg>
// 更高效的计时器,类似于setTimeout,不会发生丢
requestAnimationFrameID = window.requestAnimationFrame(doAnim); // Continue calling the doAnim() function.
window.cancelAnimationFrame(requestAnimationFrameID)
// handle multiple browsers for requestAnimationFrame()
window.requestAFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
// if all else fails, use setTimeout
function (callback) {
return window.setTimeout(callback, 1000 / 60); // shoot for 60 fps
};
})();
// handle multiple browsers for cancelAnimationFrame()
window.cancelAFrame = (function () {
return window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame ||
window.oCancelAnimationFrame ||
function (id) {
window.clearTimeout(id);
};
})();
-->
<script>
function $(id){
return document.getElementById(id);
}
function canvasMap(){
var xmlns = 'http://www.w3.org/2000/svg';
// 创建一条线
// <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
this.createLine = function(options){
return createElement('line', options);
};
// 创建组
// <g></g>
this.createGroup = function(options){
return createElement('g', options);
};
// 创建矩形
// <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
this.createRect = function(options){
return createElement('rect', options);
};
// 创建圆形
// <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
this.createCircle = function(options){
return createElement('circle', options);
};
// 创建路径
// <path d="M250 150 L150 350 L350 350 Z" />
this.createPath = function(options){
return createElement('path', options);
};
// 创建折线
// <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>
this.createPolyline = function(options){
return createElement('polyline', options);
};
// 创建SVG
// <svg width="500" height="500"></svg>
this.createSVG = function(options){
return createElement('svg', options);
};
// 创建三角形
// <polygon points="220,100 300,210 170,250" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
this.createPolygon = function(options){
return createElement('polygon', options);
};
// 创建文本节点
// <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24"> It's SVG!</text>
this.createText = function(options){
return createElement('text', options);
}
// 创建元素
function createElement(tag, options){
var node = null;
node = document.createElementNS(xmlns, tag);
for(var op in options){
node.setAttribute(op, options[op]);
}
return node;
}
}
var canvas = new canvasMap();
var root = canvas.createSVG({width:500, height: 500});
$('contains').appendChild(root);
var rect = canvas.createRect({'x':5,'y':5,'rx':5,'ry':5,'width':100,'height':100,'style':'fill:rgb(0,0,255);stroke-width:2;stroke:rgb(0,0,0)'});
root.appendChild(rect);
var circle = canvas.createCircle({'cx':100,'cy':100,'r':20,'style':'fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)'});
root.appendChild(circle);
var polygon = canvas.createPolygon({'points':'200,250 210,280 220,250','style':'fill;#ccc;stroke:#000;stroke-width:2'});
root.appendChild(polygon);
</script>
</body>
</html>
相关推荐
本主题聚焦于使用Java编程语言将CAD的DXF(Drawing Exchange Format)格式转换为SVG(Scalable Vector Graphics)格式。DXF是一种由Autodesk为AutoCAD设计的二维图形交换格式,而SVG是一种基于XML的矢量图像格式,...
总之,这个SVG小例子压缩包提供了一个实践和学习SVG与鼠标事件交互的好机会。通过对这些例子的分析和实践,你不仅能理解SVG的基本元素,还能掌握如何利用JavaScript响应用户的鼠标操作,从而为你的网页和应用程序...
"一些简单的SVG小例子"这个压缩包可能包含了一系列基本的SVG图形示例,如圆形、矩形、线条、路径等,这些例子可能都是用纯SVG标记语言编写的。SVG的基本元素包括: 1. `<svg>`:这是SVG文档的根元素,定义了图形的...
在“svg关系示例图”这个主题中,我们将深入探讨如何使用SVG来创建表示多人多关系交互的动态关系图,以及如何利用矩阵来辅助这一过程。 1. **SVG关系图的构建**:在SVG中,我们可以利用`<rect>`, `<circle>`, `...
在这个例子中,我们首先创建了一个`PlutoSVG`对象,然后调用`parse()`方法解析SVG文件。接着,我们创建一个`PlutoRenderer`实例,传入解析后的SVG文档,以及目标PNG文件的宽度、高度。最后,调用`render()`方法将SVG...
4. `SVG的动态折线图.rar`:这个文件可能是包含动态SVG折线图的示例代码或资源,动态折线图常用于数据可视化,通过JavaScript库如D3.js可以实现。 5. `embedded_sound.svg`:这个文件名暗示它可能是一个嵌入了声音...
本示例代码是关于如何使用Java将SVG转换为EMF,这在需要在Windows系统中处理矢量图形时非常有用,因为EMF是Windows系统广泛支持的格式。 SVG是一种基于XML的开放标准,用于描述2D图形。它支持复杂的形状、路径、...
在"svg.rar"这个压缩包中,可能包含了使用C++编写的SVG示例代码。"sdf.txt"可能是一个文本文件,里面可能记录了代码的说明、注释或数据。而"svg的小例子"可能是一个实际的SVG图形文件,展示了如何用C++生成或处理SVG...
在这个示例中,`handlePinchGesture`方法会根据 pinch手势的缩放比例调整SVG图像的大小。`imageView.transform`属性被更新,以反映新的缩放级别。 除了缩放,SVGKit还支持其他交互功能,如平移、旋转等。通过添加...
通过分析这些SVG示例,开发者可以学习如何编写SVG代码,理解其语法结构,以及如何在C++程序中利用这些代码来生成和操作矢量图形。这不仅有助于提升图形设计技能,也有助于提高C++应用的视觉表现力。 SVG的学习资源...
2. 图形转换:使用C#代码,结合SVG库,将每个数据点转换为SVG的圆点(`<circle>`元素)或者其他形状,设定相应的样式,如颜色、大小等。 3. 组合SVG元素:将所有转换后的点组合成一个完整的SVG文档结构,包括`<svg>`...
在本文中,我们将深入探讨如何在C# .NET WinForm应用程序中使用SVG(Scalable Vector Graphics)图形。SVG是一种开放标准的矢量图形格式,它允许开发者创建可缩放的、高质量的图形,适用于各种屏幕分辨率。由于...
在Android应用中,使用SVG可以提供高质量的图标和图形,尤其适用于多种屏幕尺寸和分辨率的设备。本文将详细介绍如何使用Glide加载和下载SVG矢量图片。 1. SVG的优势: - 可缩放性:SVG图像可以在不影响质量的情况...
在开发过程中,记得参考Batik的官方文档,它提供了详细的API说明和使用示例,对于解决遇到的问题非常有帮助。虽然网络上的资源可能不多,但深入研究 Batik,你会发现它是一个强大的SVG处理工具,能为你的项目带来...
此外,SVG还支持使用`<text>`元素添加可编辑的文本,并且可以调整字体、大小、颜色等属性。 SVG的颜色填充和描边可以通过`fill`和`stroke`属性进行控制,同时支持线性渐变(`linearGradient`)和径向渐变(`...
你可以参考`androidsvg`库的文档或示例代码来完成这个部分。 配置好Glide模块后,现在就可以在代码中使用Glide加载SVG图像了。在需要显示SVG的地方,使用以下代码: ```java Glide.with(context) .load("your_svg...
svg2dxf脚本使用2个参数(输入文件和输出文件)进行调用: svg2dxf input.svg output.dxf 要求 svg2dxf使用: 墨迹 邮编 它们可以在任何不错的GNU / Linux发行版的标准存储库中广泛使用。 尖端 使用Inkscape准备...
- `demo`: 示例文件夹,展示如何在HTML中使用这些SVG加载图标。 - `styles.css`: 可能包含用于样式化和动画SVG图标的CSS代码。 - `README.md`: 文件说明,解释如何使用这些SVG加载图标以及相关注意事项。 6. **...
在提供的`drag.svg`文件中,可能包含了一个实现拖拽效果的完整示例,你可以直接在浏览器中打开查看并研究其代码实现。通过理解并实践这个示例,你将能更好地掌握SVG中的拖拽机制,并能够将其应用到自己的项目中。
在本文中,我们将深入探讨如何在Vue项目中利用Three.js库与SVG图形结合,特别是关于`transformSVGPathExposed`函数的使用。Three.js是一个强大的JavaScript库,用于在Web浏览器中创建和展示3D图形,而SVG(Scalable ...