`

SVG使用示例

JavaScriptsvg 
阅读更多

<!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>

 

分享到：
| js 中 document.createEvent的用法-转载
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    svg小例子(主要是鼠标事件)

    总之，这个SVG小例子压缩包提供了一个实践和学习SVG与鼠标事件交互的好机会。通过对这些例子的分析和实践，你不仅能理解SVG的基本元素，还能掌握如何利用JavaScript响应用户的鼠标操作，从而为你的网页和应用程序...

    一些简单的svg小例子

    "一些简单的SVG小例子"这个压缩包可能包含了一系列基本的SVG图形示例，如圆形、矩形、线条、路径等，这些例子可能都是用纯SVG标记语言编写的。SVG的基本元素包括： 1. `&lt;svg&gt;`：这是SVG文档的根元素，定义了图形的...

    svg关系示例图

    在“svg关系示例图”这个主题中，我们将深入探讨如何使用SVG来创建表示多人多关系交互的动态关系图，以及如何利用矩阵来辅助这一过程。 1. **SVG关系图的构建**：在SVG中，我们可以利用`&lt;rect&gt;`, `&lt;circle&gt;`, `...

    史上最全的SVG例子

    4. `SVG的动态折线图.rar`：这个文件可能是包含动态SVG折线图的示例代码或资源，动态折线图常用于数据可视化，通过JavaScript库如D3.js可以实现。 5. `embedded_sound.svg`：这个文件名暗示它可能是一个嵌入了声音...

    c/c++ svg转png, svg文件渲染例子

    在这个例子中，我们首先创建了一个`PlutoSVG`对象，然后调用`parse()`方法解析SVG文件。接着，我们创建一个`PlutoRenderer`实例，传入解析后的SVG文档，以及目标PNG文件的宽度、高度。最后，调用`render()`方法将SVG...

    SVG转EMF的示例代码

    本示例代码是关于如何使用Java将SVG转换为EMF，这在需要在Windows系统中处理矢量图形时非常有用，因为EMF是Windows系统广泛支持的格式。 SVG是一种基于XML的开放标准，用于描述2D图形。它支持复杂的形状、路径、...

    svg.rar_svg_svg c++_svg 例子

    在"svg.rar"这个压缩包中，可能包含了使用C++编写的SVG示例代码。"sdf.txt"可能是一个文本文件，里面可能记录了代码的说明、注释或数据。而"svg的小例子"可能是一个实际的SVG图形文件，展示了如何用C++生成或处理SVG...

    IOS使用SVGKit库显示svg

    在这个示例中，`handlePinchGesture`方法会根据 pinch手势的缩放比例调整SVG图像的大小。`imageView.transform`属性被更新，以反映新的缩放级别。 除了缩放，SVGKit还支持其他交互功能，如平移、旋转等。通过添加...

    SVG.rar_svg_svg 源代码_svg c++

    通过分析这些SVG示例，开发者可以学习如何编写SVG代码，理解其语法结构，以及如何在C++程序中利用这些代码来生成和操作矢量图形。这不仅有助于提升图形设计技能，也有助于提高C++应用的视觉表现力。 SVG的学习资源...

    C#,.net,winform上SVG的源代码和示例

    在本文中，我们将深入探讨如何在C# .NET WinForm应用程序中使用SVG（Scalable Vector Graphics）图形。SVG是一种开放标准的矢量图形格式，它允许开发者创建可缩放的、高质量的图形，适用于各种屏幕分辨率。由于...

    SVG图像生成示例

    2. 图形转换：使用C#代码，结合SVG库，将每个数据点转换为SVG的圆点（`&lt;circle&gt;`元素）或者其他形状，设定相应的样式，如颜色、大小等。 3. 组合SVG元素：将所有转换后的点组合成一个完整的SVG文档结构，包括`&lt;svg&gt;`...

    glide加载和下载svg矢量图片

    在Android应用中，使用SVG可以提供高质量的图标和图形，尤其适用于多种屏幕尺寸和分辨率的设备。本文将详细介绍如何使用Glide加载和下载SVG矢量图片。 1. SVG的优势： - 可缩放性：SVG图像可以在不影响质量的情况...

    svg动画示例效果展示

    svg动画示例效果展示

    使用batik转换svg文件

    在开发过程中，记得参考Batik的官方文档，它提供了详细的API说明和使用示例，对于解决遇到的问题非常有帮助。虽然网络上的资源可能不多，但深入研究 Batik，你会发现它是一个强大的SVG处理工具，能为你的项目带来...

    SVG简介及实例

    此外，SVG还支持使用`&lt;text&gt;`元素添加可编辑的文本，并且可以调整字体、大小、颜色等属性。 SVG的颜色填充和描边可以通过`fill`和`stroke`属性进行控制，同时支持线性渐变(`linearGradient`)和径向渐变(`...

    12个SVG Loading图标

    - `demo`: 示例文件夹，展示如何在HTML中使用这些SVG加载图标。 - `styles.css`: 可能包含用于样式化和动画SVG图标的CSS代码。 - `README.md`: 文件说明，解释如何使用这些SVG加载图标以及相关注意事项。 6. **...

    Android-使用Glide在Android中加载SVG

    你可以参考`androidsvg`库的文档或示例代码来完成这个部分。 配置好Glide模块后，现在就可以在代码中使用Glide加载SVG图像了。在需要显示SVG的地方，使用以下代码： ```java Glide.with(context) .load("your_svg...

    使用 svg 实现拖拽效果

    在提供的`drag.svg`文件中，可能包含了一个实现拖拽效果的完整示例，你可以直接在浏览器中打开查看并研究其代码实现。通过理解并实践这个示例，你将能更好地掌握SVG中的拖拽机制，并能够将其应用到自己的项目中。

    three.js中svg拉伸体的转换函数transformSVGPathExposed

    在本文中，我们将深入探讨如何在Vue项目中利用Three.js库与SVG图形结合，特别是关于`transformSVGPathExposed`函数的使用。Three.js是一个强大的JavaScript库，用于在Web浏览器中创建和展示3D图形，而SVG（Scalable ...

    SVG_SVG仿真_svg_psim_

    SVG，全称Scalable Vector ...通过学习和实践这些示例，你可以掌握如何在PSIM中有效地应用SVG进行电力系统仿真的方法。记住，理解和掌握SVG的基本语法、PSIM的仿真原理以及两者间的接口技术是成功实现这一目标的关键。

Magicbox
Global site tag (gtag.js) - Google Analytics