- 浏览: 132362 次
- 性别:
- 来自: 未来
文章分类
- 全部博客 (174)
- Eclispe (3)
- javaScript (33)
- SVG学习 (22)
- Java (21)
- 网站 (12)
- learn English (1)
- 文档 (25)
- 常用网站收录 (11)
- struts (6)
- 常用API (1)
- html (2)
- jsp (2)
- spring (2)
- IDE (1)
- 数据结构 (1)
- JDBC (2)
- html + css (1)
- xml (3)
- 心声 (1)
- Axis2 (1)
- svg (4)
- webService (2)
- unix (2)
- c/c++ (3)
- html5 (1)
- Android (2)
- Jet标签 (1)
- oracle (2)
- 工具 (1)
- ideas (0)
- lean plan (1)
- java技术网站,信息收集综合及分类 (0)
最新评论
-
calosteward:
感谢博主对svg convert to PDF资源的分享。我也 ...
How to Convert a SVG File to PDF Format -
long316:
fhhhh
WinArchiver 2.7 -
long316:
ddddd
WinArchiver 2.7
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<svg onload="init(evt)" width="500" height="500" zoomAndPan="disable"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<script type="text/ecmascript"><![CDATA[
var svgns = "http://www.w3.org/2000/svg";
var width = 6;
var height = 6;
var r = 15;
var offset = 30;
var spacing = 20;
var elems = [];
var midX = (500 - ((width-1) * spacing)) / 2;
var midY = (470 - ((height-1) * spacing)) / 2;
var world;
function init(e) {
if ( window.svgDocument == null )
svgDocument = e.target.ownerDocument;
world = svgDocument.getElementById("world");
world.setAttributeNS(
null,
"transform",
"translate(" + midX + "," + midY + ")"
);
createElements();
}
function createElements() {
for ( var y = 0; y < height; y++ ) {
for ( var x = 0; x < width; x++ ) {
createElement(x, y);
}
}
}
function createElement(x, y) {
var elem = svgDocument.createElementNS(svgns, "circle");
var cx = x * spacing;
var cy = y * spacing;
var translate = "translate(" + cx + "," + cy + ")";
elem.setAttributeNS(null, "cx", -offset);
elem.setAttributeNS(null, "r", r);
elem.setAttributeNS(null, "transform", translate);
// store shape for later manipulation
elems.push([elem, cx, cy]);
// add shape to world
world.appendChild(elem);
}
function update(e) {
var length = elems.length;
for ( var i = 0; i < length; i++ ) {
var elem = elems[i];
var dx = (e.clientX - elem[1]) - midX;
var dy = (e.clientY - elem[2]) - midY;
var angle = 180 * Math.atan2(dy, dx) / Math.PI;
var rotate = "rotate(" + angle + ")";
var translate = "translate(" + elem[1] + "," + elem[2] + ")";
elem[0].setAttributeNS(
null,
"transform",
translate + " " + rotate
);
}
}
function changeColor(e) {
var color = e.target.getAttributeNS(null, "stroke");
world.setAttributeNS(null, "stroke", color);
world.setAttributeNS(null, "fill", color);
}
]]></script>
<rect x="-16384" y="-16384" width="32767" height="32767"
fill="none" pointer-events="fill" onmousemove="update(evt)"/>
<rect x="10" y="10" width="478" height="478" rx="5" ry="5"
fill="none" stroke="grey" stroke-width="2"/>
<g id="world" pointer-events="none"
stroke="rgb(192,124,158)" fill="rgb(192,124,158)" fill-opacity="0.5"/>
<rect x="10" y="460" width="478" height="29" rx="5" ry="5"
stroke="grey" stroke-width="2" fill="rgb(230,230,230)"/>
<g fill-opacity="0.5" onclick="changeColor(evt)">
<circle cx="25" cy="475" r="10" stroke="rgb(192,124,158)" fill="rgb(192,124,158)"/>
<circle cx="50" cy="475" r="10" stroke="rgb(100,149,5)" fill="rgb(100,149,5)"/>
<circle cx="75" cy="475" r="10" stroke="rgb(8,168,128)" fill="rgb(8,168,128)"/>
<circle cx="100" cy="475" r="10" stroke="rgb(240,96,18)" fill="rgb(240,96,18)"/>
<circle cx="125" cy="475" r="10" stroke="rgb(73,122,247)" fill="rgb(73,122,247)"/>
<circle cx="150" cy="475" r="10" stroke="rgb(240,203,0)" fill="rgb(240,203,0)"/>
<circle cx="175" cy="475" r="10" stroke="rgb(170,78,247)" fill="rgb(170,78,247)"/>
</g>
<text x="485" y="485" font-size="10px" font-rendering="optimizeLegibility" fill="grey" text-anchor="end" pointer-events="none"> Copyright 2004, Kevin Lindsey </text>
</svg>
<svg onload="init(evt)" width="500" height="500" zoomAndPan="disable"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<script type="text/ecmascript"><![CDATA[
var svgns = "http://www.w3.org/2000/svg";
var width = 6;
var height = 6;
var r = 15;
var offset = 30;
var spacing = 20;
var elems = [];
var midX = (500 - ((width-1) * spacing)) / 2;
var midY = (470 - ((height-1) * spacing)) / 2;
var world;
function init(e) {
if ( window.svgDocument == null )
svgDocument = e.target.ownerDocument;
world = svgDocument.getElementById("world");
world.setAttributeNS(
null,
"transform",
"translate(" + midX + "," + midY + ")"
);
createElements();
}
function createElements() {
for ( var y = 0; y < height; y++ ) {
for ( var x = 0; x < width; x++ ) {
createElement(x, y);
}
}
}
function createElement(x, y) {
var elem = svgDocument.createElementNS(svgns, "circle");
var cx = x * spacing;
var cy = y * spacing;
var translate = "translate(" + cx + "," + cy + ")";
elem.setAttributeNS(null, "cx", -offset);
elem.setAttributeNS(null, "r", r);
elem.setAttributeNS(null, "transform", translate);
// store shape for later manipulation
elems.push([elem, cx, cy]);
// add shape to world
world.appendChild(elem);
}
function update(e) {
var length = elems.length;
for ( var i = 0; i < length; i++ ) {
var elem = elems[i];
var dx = (e.clientX - elem[1]) - midX;
var dy = (e.clientY - elem[2]) - midY;
var angle = 180 * Math.atan2(dy, dx) / Math.PI;
var rotate = "rotate(" + angle + ")";
var translate = "translate(" + elem[1] + "," + elem[2] + ")";
elem[0].setAttributeNS(
null,
"transform",
translate + " " + rotate
);
}
}
function changeColor(e) {
var color = e.target.getAttributeNS(null, "stroke");
world.setAttributeNS(null, "stroke", color);
world.setAttributeNS(null, "fill", color);
}
]]></script>
<rect x="-16384" y="-16384" width="32767" height="32767"
fill="none" pointer-events="fill" onmousemove="update(evt)"/>
<rect x="10" y="10" width="478" height="478" rx="5" ry="5"
fill="none" stroke="grey" stroke-width="2"/>
<g id="world" pointer-events="none"
stroke="rgb(192,124,158)" fill="rgb(192,124,158)" fill-opacity="0.5"/>
<rect x="10" y="460" width="478" height="29" rx="5" ry="5"
stroke="grey" stroke-width="2" fill="rgb(230,230,230)"/>
<g fill-opacity="0.5" onclick="changeColor(evt)">
<circle cx="25" cy="475" r="10" stroke="rgb(192,124,158)" fill="rgb(192,124,158)"/>
<circle cx="50" cy="475" r="10" stroke="rgb(100,149,5)" fill="rgb(100,149,5)"/>
<circle cx="75" cy="475" r="10" stroke="rgb(8,168,128)" fill="rgb(8,168,128)"/>
<circle cx="100" cy="475" r="10" stroke="rgb(240,96,18)" fill="rgb(240,96,18)"/>
<circle cx="125" cy="475" r="10" stroke="rgb(73,122,247)" fill="rgb(73,122,247)"/>
<circle cx="150" cy="475" r="10" stroke="rgb(240,203,0)" fill="rgb(240,203,0)"/>
<circle cx="175" cy="475" r="10" stroke="rgb(170,78,247)" fill="rgb(170,78,247)"/>
</g>
<text x="485" y="485" font-size="10px" font-rendering="optimizeLegibility" fill="grey" text-anchor="end" pointer-events="none"> Copyright 2004, Kevin Lindsey </text>
</svg>
- svg.zip (2.8 KB)
- 下载次数: 2
发表评论
-
使用脚本动态操作 SVG 文档
2012-08-20 23:25 700http://www.ibm.com/developerwor ... -
SVG脚本编程的一些技巧 .
2012-08-20 23:24 820http://blog.csdn.net/mtfsoft/ar ... -
有鼠标位置获取元素
2012-12-23 23:36 600document.elementFromPoint(x,y) ... -
getCTM
2012-08-19 17:22 709<svg xmlns="http://www. ... -
Svg事件响应:获取鼠标即时屏幕坐标
2012-08-19 17:04 4291http://ribbonchen.blog.163.com/ ... -
svg_example
2012-04-26 00:54 765http://srufaculty.sru.edu/david ... -
textPath element | SVGTextPathElement object
2012-02-13 22:51 856http://msdn.microsoft.com/ZH-CN ... -
path element | SVGPathElement object
2012-02-13 22:49 1240http://msdn.microsoft.com/ZH-CN ... -
svg text参考
2012-02-13 14:20 690http://www.w3.org/TR/SVG11/text ... -
How to Convert a SVG File to PDF Format
2012-02-05 22:40 1108http://xmlgraphics.apache.org/b ... -
在svg文间画图过程中放大缩小图片后,坐标偏移问题
2012-01-01 16:48 1655http://blog.csdn.net/qingcai200 ... -
创建随内容动态缩放的SVG图形
2012-01-01 16:47 1897创建随内容动态缩放的S ... -
svg矩阵变换
2012-01-01 16:16 905svg矩阵变换 -
svg变换参考
2012-01-01 16:14 884<?xml version="1.0" ... -
svg网站 参考信息
2011-12-31 10:53 872http://blog.csdn.net/xuezhimeng ... -
用CorelDRAW制作SVG手机主题界面图片
2011-10-25 23:57 2244用CorelDRAW制作SVG手机主题界面图片 Ljmsto ... -
动态创建 svg
2011-10-20 17:34 599http://riso.iteye.com/blog/3934 ... -
参考网站收录
2011-10-12 15:22 743PDM中文网运维(http://www.pdmcn.com/b ... -
svg网站
2011-10-08 15:03 1090http://smartblack.iteye.com/blo ... -
svg的
2011-09-24 00:47 833http://xinsheng.huawei.com/cn/b ...
相关推荐
SVG学习教程.doc SVG学习教程 svg 学习 教程
很全面的svg学习资料很全面的svg学习资料很全面的svg学习资料很全面的svg学习资料很全面的svg学习资料很全面的svg学习资料
SVG学习资料,SVG相关软件汇总找资料
svg 学习 资料 合集
SVG学习资料 SVG是W3C正式推荐的开放标准的文本式矢量图形描述语言。使用SVG可以在网页上显示出各种各样高质量的矢量图形。并且SVG是一种使用XML来描述二维图像的语言,这使SVG可以与许多其他标准无缝结合 。
svg基础学习,svg基础语法,svg初学者必备教程,欢迎下载
svg 学习 资料
NULL 博文链接:https://zhousheng193.iteye.com/blog/1462197
学习 svg 需要掌握的知识:xml、html SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形...
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
基础学习及javascript 之间的信息传递
svg 关于javascript的数据转换及网页编程
我自己学习过程中总结的有关svg的内容,放到这里与大家共同分享
这是我用过的svg使用手册,希望对你们有帮助!
学习SVG 这是我的svg学习的结果集
SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万
博文链接:https://lib.iteye.com/blog/141424