当SVG图形较复杂时,一行行地写xml会让人崩溃的。如果先在javascript中map变量设置一些属性,再动态生成就容易得多了。不过只对有大量重复形状时才会减少工作量。
这里简单演示生成"Label"的过程,参考了如下页面:
http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml
dynashow.svg
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/TR/2001/REC-SVG-20050904/DTD/svg11.dtd">
<!-- Created by amaya 11.3.1, see http://www.w3.org/Amaya/ -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600"
height="600" baseProfile="full" onload="init()">
<title>Dynamic Create Sharp</title>
<style type="text/css">
g rect{stroke: blue; stroke-opacity: 1; stroke-width: 1px; fill: white;}
g text{font-family:Verdana,Tahoma; font-weight:bold; font-size:small; fill:red; }</style>
<script type="text/javascript" xlink:href="dynashow.js"> </script>
<script type="text/javascript">
<![CDATA[
var labs = [{x: "10", y: "10", width: "100", height: "35", label: "Good Moring!"},
{x: "30", y: "50", width: "140", height: "35", label: "Hello world!"},
{x: "50", y: "100", width: "250", height: "35", label: "Dyanmic create SVG Element!"}];
function init() {
for (var i = 0; i < labs.length; i++) {
createMySharp(labs[i]);
}
}
]]>
</script>
</svg>
注意第12行引入外部javascript文件的方法
<script type="text/javascript" xlink:href="dynashow.js"> </script>, 需要使用xlink:href属性。该文件中的js代码,labs定义了一个代表3个sharp相关数据的列表,init()将会使用该列表来生成相关svg元素。
dynashow.js
var SVG_NS = "http://www.w3.org/2000/svg";
var XLINK_NS = "http://www.w3.org/1999/xlink";
var ATTR_MAP = {
"className": "class",
"svgHref": "href"
};
var NS_MAP = {
"svgHref": XLINK_NS
};
function makeSVG(tag, attributes){
var elem = document.createElementNS(SVG_NS, tag);
for (var attribute in attributes) {
var name = (attribute in ATTR_MAP ? ATTR_MAP[attribute] : attribute);
var value = attributes[attribute];
if (attribute in NS_MAP)
elem.setAttributeNS(NS_MAP[attribute], name, value);
else
elem.setAttribute(name, value);
}
return elem;
}
//var lab1 = {x: "10", y: "10", width: "100", height: "35", label: "Good Moring!"};
function createMySharp(sharpData) {
var svgdoc = document.documentElement;
var group = makeSVG("g", {x: "0", y: "0", transform: "translate("+sharpData.x+", "+sharpData.y+")"});
var rect = makeSVG("rect", {x: "0", y: "0", width: sharpData.width, height: sharpData.height});
group.appendChild(rect);
var text = makeSVG("text", {x: "0", y: "25"});
text.textContent = sharpData.label;
group.appendChild(text);
svgdoc.appendChild(group);
}
makeSVG()在svg名字空间下生成相应elemnt,并设置属性,属性由一个map表示。ATTR_MAP是为了避免svg属性名和javascript中的关键字或命名规则相冲突,而NS_MAP是由于一些属性如xlink:href在svg名字空间之外。
createMySharp()就在svg文件的创建element的主体了,我们可以根据实际需要来定义一些形状并进行参数化,还可以更进一步定义自己的图形库了。
- 大小: 23.8 KB
分享到:
相关推荐
支持所有基本SVG元素:,,,,,,,路径,图像和组 不需要了解SVG,它与使用seq,list或array一样容易 除SharpVG外,不需要任何外部依赖项 Windows,Linux和OSX上的.NET Standard跨平台支持 对SVG动画的支持有限 ...
【材料】:d3.js的模块的思维导图,图片...例如,可以使用 D3 创建 SVG 元素,并使用外部样式表进行样式化。也可以使用复合过滤器效果,虚线和裁剪。这样在调试的时候可以方便的使用浏览器内置的调试工具来进行调试。
从随时间变化动画的Path对象动态创建 更多即将推出... 渲染库公开了一个名为AnimatedDrawing的中央窗口小部件,该窗口小部件允许以类似图形的方式渲染SVG路径(通过AnimatedDrawing.svg )或Flutter Path对象...
创建的元素的html转换如下所示:<CustomTag>placeholder text安装使用NPM安装: npm install ckeditor5-custom-element 要添加此插件的功能,您应该对编辑器进行自定义构建。 请按照的说明进行操作。 要加载插件,...
向SVG元素ID添加注释 不同的SVG编辑器具有不同的导出行为,但是请通过导出选项确保这三件事是正确的: 这些ID会导出到SVG中。 不可见的元素仍会导出。 文本不会转换为固定的轮廓(如果您希望文本是动态的)。通用...
我们通过缓存,引荐来源和其他身份标识您的唯一身份,并返回动态SVG元素。 此外, views还提供了自定义SVG样式,有关更多信息,请参见。 用法 创建以提交您的域。 将img添加到您自己的页面: 附加说明 出于性能...
轻松创建带有动态元素的几何“板”。 样本 如下代码: { ( builder ) => { builder . axes ( ) ; const A = builder . point ( - 3 , 3 ) ; const B = builder . point ( 4 , 4 ) ; const O = builder ....
抛球帆布canvas手写签名svg svg画曲线svg画柱形图svg画折线图svg画饼图svg画雷达图svg画环形图svg绘画十年转盘抽奖埃哈特echarts的调整大小和配置ng注解使用响应式表单时间选择器块加载容器倒计时指令权限指令管道...
要生成通过浏览器展示的动态图表,首选目前最热门的Web数据可视化库-D3,阅读本书可以掌握必要的HTML、CSS、JavaScript和SVG基础知识;学会基于数据在网页里生成元素和为它们设置样式的技巧;能够生成条形图、散点图...
SVG 动画:使用 SVG(可缩放矢量图形)和 SMIL(同步多媒体集成语言)技术创建矢量图形动画,可以实现复杂的矢量图形动画效果,如路径动画、填充动画等。 Canvas 动画:通过 HTML5 Canvas 元素绘制图形,利用 ...
“D3.js是一个JavaScript库,它... 在这里,读者将会学习到数据可视化的基本概念,JavaScript 的函数式编程,以及 D3的基础概念,例如元素选取、数据绑定、动画以及SVG生成。除此之外,读者还会领略到D3的一些高级特性.
示例中包含了d3.js对html元素(div,p,span这些)的操作(增删改),也包含了对svg元素(circle 圆,rect 矩形,line 线条等)的操作。 这里重点说一下d3中的data函数,如下: //创建一个长度为10的整形数组, 得到...
通过动态的,互动的,引人入胜的网页内容将您的想法变为现实。HTML5及其广泛的功能使您能够将自己的设想变为现实,并且无需高级动画和交互功能。 12、符号 使用符号在场景或同一场景的不同位置共享相同的元素,...
学会基于数据在网页里生成元素和为它们设置样式的技巧; 能够生成条形图、散点图、饼图、堆叠条形图和力导向图; 使用平滑的过渡动画来展示数据的变化; 赋予图表动态交互能力,响应用户从不同角度探索数据的请求; ...
, 学会基于数据在网页里生成元素和为它们设置样式的技巧;, 能够生成条形图、散点图、饼图、堆叠条形图和力导向图;, 使用平滑的过渡动画来展示数据的变化;, 赋予图表动态交互能力,响应用户从不同角度探索数据的...
Unity UI,Unity 2D,TextMesh Pro,NGUI,2D ToolKit,SVG导入器,标准组件 本地化 图像,文本,声音,字体,精灵,地图集,预制件,TextMeshes,下拉列表等。 自动翻译 内置支持Google Translator,可自动将所有...
这意味着,与像这样的命令式(但仍然非常强大)库不同,植物树可以使用 JavaScript 框架(如 Angular、React 等)的 DOM 模板构建,并且可以在不需要告诉的情况下从树中添加或删除元素树来更新或重绘任何东西。...
允许动态更改列表的主题和列表的元素数量。 包括翻转文本以获取更多信息。 wordlcoud :一种从节点和有向边的数据集创建交互式 wordcloud 的简单方法。 允许拖动以更改布局并双击以突出显示连接的组件。toptwenty....
学会基于数据在网页里生成元素和为它们设置样式的技巧; 能够生成条形图、散点图、饼图、堆叠条形图和力导向图; 使用平滑的过渡动画来展示数据的变化; 赋予图表动态交互能力,响应用户从不同角度探索数据...