-
慕圣3317083
- 怎样对引入的svg图中的变量进行控制
不能直接在浏览器中对文件内容进行操作，不过可以用node来实现，或者直接把svg中的代码转成字符串的形式，代替到html中
- 2019-09-19 1回答·1610浏览
-
辉哥的嘲讽
- 怎么做到创建多个图形的
每次创建都会生成一个存在于 Dom 树中的DOM，每次创建都是生成一个新的 DOM 插入到 DOM 树中
- 2018-07-17 1回答·1070浏览
-
hailun
- 这个SVG编辑器是自己写的吗？
- 已采纳 颠颠且自在 的回答
yes
- 2017-08-05 1回答·1775浏览
-
qq_陌若安生_8
- 谁有源码吗
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title><style>
html,body{
margin:0;
padding:0;
width:100%;
height:100%;
background:#001122;
line-height:0;
font-size:0;
}
</style>
</head>
<body>
<svg width="100%" height="100%" viewBox="-400 -300 800 600"
preserveAspectRatio="xMidYMid slice">
<defs>
<polygon id="star" points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2" fill="white"></polygon>
</defs>
<g id="real">
<g id="star-group"></g>
<g id="moon-group" transform="translate(0,100)">
<mask id="moon-mask">
<circle cx="-250" cy="-180" r="100" fill="white"></circle>
<circle cx="-200" cy="-200" r="100" fill="black"></circle>
</mask>
<circle cx="-250" cy="-180" r="100" fill="yellow" mask="url(#moon-mask)"></circle>
</g>
<g id="light-tower" transform="translate(250,0)" >
<defs>
<linearGradient id="tower" x1="0" y1="0" x2="1" y2="0" >
<stop offset="0" stop-color="#999" ></stop>
<stop offset="1" stop-color="#333" ></stop>
</linearGradient>
<linearGradient id="light" cx="0.5" cy="0.5" r="0.5" >
<stop offset="0" stop-color="rgba(255,255,255,0.8)" ></stop>
<stop offset="1" stop-color="rgba(255,255,255,0.0)" ></stop>
</linearGradient>
<clipPath id="light-clip">
<polygon points="0 0 -400 -15 -400 15" fill="rgba(255,0,0,0.5)">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
form="0"
to="360"
dur="10s"
repeatCount="indefinite"
</animateTransform>
</polygon>
<circle cx="0" cy="0" r="2"></circle>
</clipPath>
</defs>
<polygon points="0 0 5 50 -5 50" fill="url(#tower)"></polygon>
<ellipse cx="0" cy="0" rx="300" ry="100" fill="url(#light)" clip-path="url(#light-clip)"></ellipse>
</g>
</g>
<g id="reflact" transform="translate(0,50)" mask="url(#fading)">
<defs>
<linearGradient id="fade" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="rgba(255,255,255,0.3)"></stop>
<stop offset="0.5" stop-color="rgba(255,255,255,0.0)"></stop>
</linearGradient>
<mask id="fading">
<rect x="-400" y="0" width="800" height="300" fill="url(#fade)"></rect>
</mask>
</defs>
<use xlink:href="#real" transform="scale(1,-1) translate(0,-50)">
</g>
<line x1="-400" y1="50" x2="400" y2="50" stroke="white"></line>
</svg>
<script type="text/javascript">
var SVG_NS = "http://www.w3.org/2000/svg";
var XLINKS_NS = "http://www.w3.org/1999/xlink";
var paper = document.querySelector("svg");
renderStart();
function use(origin){
var _use = document.createElementNS(SVG_NS,"use");
_use.setAttributeNS(XLINKS_NS,"xlink:href","#"+origin.id);
return _use;
}
function between(min,max){
return min+(max - min)*Math.random();
}
function renderStart(){
var starRef = document.getElementById("star");
var starGroup = document.getElementById("star-group");
var starCount = 500;
var star;
while(starCount--){
star = use(starRef);
star.setAttribute("opacity",between(0.1,0.6));
star.setAttribute("transform","translate("+between(-400,400)+","+between(-300,50)+") scale("+between(0.1,0.8)+")");
starGroup.appendChild(star);
}
}
</script>
</body>
</html>- 2017-06-06 1回答·1352浏览
-
旷野365
- 正则匹配结果
OK 明白了 是吧字符串强制转换成 数字了
- 2017-01-16 1回答·724浏览
-
TopDancer烊
- 地址的问题
- 已采纳 Chdaring 的回答
这是SVG的命名空间，可以把它理解成我们操作系统的文件夹，或者我们可以比喻成一个容器。
- 2016-11-22 1回答·1340浏览
-
qq_小叮当_2
- 第一次学习
应该是老师做的一个编辑器，好让我们更好的理解！
- 2016-10-12 1回答·760浏览
-
Tbug
- html标签不获取直接用
可以不用获取
- 2016-09-26 1回答·844浏览
-
诺丁山丶
- canvas
- 已采纳 medusaxi 的回答
我们可以通过id直接访问对象，是因为所有的元素ID都相当于一个保存对象的全局变量。
但标准写法还是document.getElementById。
当整个页面上只有唯一一个id时，你用id的效果差不多等同于document.getElementByid()。HTML元素拥有的属性方法（比如appendChild()），id和document.getElementByid都可以正常使用。
但是当页面上有2个以上相同id的元素时，直接用id和document.getElementByid得到的是不同的东西，前者是一个数组，是所有相同id的元素的集合；后者是一个单独的html元素，是相同id的元素集合中的第一个元素。你可以自己试验下打印出来看看是啥。所以此时，HTML元素拥有的属性方法（比如appendChild()），id用不起，只有document.getElementByid才用得起。
总之，记得 ：document.getElementByid 才是标准的通过id获得html元素的标准写法就行了。视频老师只是懒得打字而已就省略了，我们自己开发中不要这么做。
ps:补充：
如果一个元素符合下面两条规则中的任一条,则window对象中必须要有与之对应的一个属性,属性值就是这个对象。
如果一个元素拥有ID属性,那么ID属性的属性值就会成为window对象的属性名.
如果一个元素拥有name属性,那么name属性的属性值就会成为window对象的属性名.但这个元素的标签名必须是: a, applet, area, embed, form, frame, frameset, iframe, img, object,其中的一个。- 2016-08-29 2回答·1403浏览
-
xgqfrms
- 为什么没有注释呀！
看视频把 对着就有注释了。
- 2016-07-31 1回答·856浏览
-
O街角O_O祝福
- 关于svg编辑器
SVGDeveloper 你看行不行？http://www.pc6.com/softview/SoftView_106754.html
- 2016-03-25 1回答·1096浏览
-
hunter_lm
- 关于Id的使用
在这里直接使用id和document.getElementById的效果是一样的，但还是建议用document.getElementById，原因有：
直接使用id，别人看代码或自己再看时，都不知道它是一个dom还是一个js变量，而document.getElementById就很明确是取一个dom
直接使用id可能有一些浏览器兼容性问题，在生产环境中更应该警惕
- 2015-11-07 1回答·1056浏览
-
hello7788
- SVG在IE中是否存在兼容性问题。
- 2015-08-26 3回答·1716浏览
-
中国鹰派
- 感觉源代码SVGEditor.html中有bug
另外， createHandle 函数中，设置range值需要放在后面。
handle.setAttribute('min', 0); handle.setAttribute('max', 800); handle.setAttribute('value', value); // 放在后面后面。 不然选中时，#shape-attrs 里的range值没有更新。
- 2015-08-11 4回答·1650浏览
-
ilovemooc
- 老师编程用的字体是什么字体？
苹果下的默认字体，Windows 下推荐使用雅黑混合 Consolas，搜索“Yahei Consolas”
- 2015-03-12 1回答·1509浏览
-
吉野大雄哥
- javascript是作者的长项吗？
怎么说“Svg主要就是h5+css3”呢？
- 2015-02-11 1回答·1170浏览
-
宁尘
- input事件类型
是的，点击的时候
- 2015-01-23 1回答·1296浏览
-
花满楼115767
-
jserHE
-
x兔子
-
conanjun
-
Ordos杨阳
