标签: raphael
jQuery SVG vs. Raphael
我正在使用SVG和JavaScript/jQuery进行交互式界面,我正在尝试在Raphael和jQuery SVG之间做出决定.我想知道
- 两者之间的权衡是什么
- 发展势头似乎在哪里.
我不需要Raphael中的VML/IE支持,也不需要jQuery SVG的绘图功能.我主要对在SVG画布上创建,动画和操作单个项目的最优雅方式感兴趣.
推荐指数
解决办法
查看次数
如何使用Javascript访问SVG元素
我正在搞乱SVG,我希望我可以在Illustrator中创建SVG文件并使用Javascript访问元素.
这是SVG文件Illustrator的开始(它似乎也添加了一堆垃圾到我删除的文件的开头)
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="276.843px" height="233.242px" viewBox="0 0 276.843 233.242" enable-background="new 0 0 276.843 233.242"
xml:space="preserve">
<path id="delta" fill="#231F20" d="M34.074,86.094L0,185.354l44.444,38.519l80.741-0.74l29.63-25.186l-26.667-37.037
c0,0-34.815-5.926-37.778-6.667s-13.333-28.889-13.333-28.889l7.407-18.519l31.111-2.963l5.926-21.481l-12.593-38.519l-43.704-5.185
L34.074,86.094z"/>
<path id="cargo" fill="#DFB800" d="M68.148,32.761l43.704,4.445l14.815,42.963l-7.407,26.667l-33.333,2.963l-4.444,14.074
l54.074-1.481l22.222,36.296l25.926-3.704l25.926-54.074c0,0-19.259-47.408-21.481-47.408s-31.852-0.741-31.852-0.741
l-19.259-39.259L92.593,8.316L68.148,32.761z"/>
<polygon id="beta" fill="#35FF1F" points="86.722,128.316 134.593,124.613 158.296,163.872 190.889,155.724 214.593,100.909
194.593,52.02 227.186,49.057 246.444,92.02 238.297,140.909 216.074,172.761 197.556,188.316 179.778,169.798 164.963,174.983
163.481,197.946 156.815,197.946 134.593,159.428 94.593,151.279 "/>
<path class="monkey" id="alpha" fill="#FD00FF" d="M96.315,4.354l42.963,5.185l18.519,42.222l71.852-8.148l20.74,46.667l-5.926,52.593
l-24.444,34.074l-25.185,15.555l-14.074-19.259l-8.889,2.964l-1.481,22.222l-14.074,2.963l-25.186,22.963l-74.074,4.444
l101.481,4.444c0,0,96.297-17.777,109.63-71.852S282.24,53.983,250.389,20.65S96.315,4.354,96.315,4.354z"/>
</svg>
正如您可能看到的,每个元素都有一个ID,我希望能够使用Javascript访问单个元素,这样我就可以更改Fill属性并响应诸如click之类的事件.
HTML是基本的沼泽
<!DOCTYPE html>
<html>
<head>
<title>SVG Illustrator …推荐指数
解决办法
查看次数
SVG重新排序z-index(拉斐尔可选)
如何在创建后重新排序Raphael或其基础SVG元素.更好的是,在SVG中存在类似层的东西吗？
理想情况下,我希望在任何时候放置元素的两层或更多层; 背景和前景层.如果这不是一个选项,那么将元素弹出到前面就可以了,在这种特殊情况下将它推到后面会更好.
谢谢,
推荐指数
解决办法
查看次数
D3.js vs Raphael.js
我对d3和拉斐尔都非常着迷.我知道Raphael是建立在D3之上的,并且它是跨浏览器兼容的,但我不确定哪一个更适合什么情况.有人可以解释一下吗？我的直接用例可能是使用SIMILE时间轴并将其与状态图集合(我打算使用d3/Raphael).谢谢!
推荐指数
解决办法
查看次数
Raphael JS和Text定位？
我试图通过提供x,y坐标来在SVG画布中定位文本
var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!");
但不会像所有其他对象一样定位文本......
x,y坐标指定对象的中心!不是"左上角"像素!
我希望沿着一条线"左对齐"文本,与标准HTML相同.
非常感谢帮助.
推荐指数
解决办法
查看次数
如何在Raphael javascript库中组合对象？
抱歉,这是一个很长的问题.我想在这里修改demo的拖动形状:
http://raphaeljs.com/graffle.html
该演示工作正常.我想要做的是将单词放在形状中,并将形状和文本作为复合单个对象移动.
以下是创建对象的代码:
window.onload = function () {
var dragger = function () {
this.ox = this.type == "rect" ? this.attr("x") : this.attr("cx");
this.oy = this.type == "rect" ? this.attr("y") : this.attr("cy");
this.animate({"fill-opacity": .2}, 500);
},
move = function (dx, dy) {
var att = this.type == "rect" ? {x: this.ox + dx, y: this.oy + dy} : {cx: this.ox + dx, cy: this.oy + dy};
this.attr(att);
for (var i = connections.length; i--;) {
r.connection(connections[i]);
}
r.safari();
},
up …推荐指数
解决办法
查看次数
Photoshop自定义形状到SVG路径字符串
有没有办法让SVG路径字符串脱离Photoshop自定义形状或路径？或者是否有另一种获取/构建类似数据的方法？我想做类似的事情:
推荐指数
解决办法
查看次数
Kineticjs vs Raphaeljs
推荐指数
解决办法
查看次数
如何在Raphael.js/IE中使模式"固定"？
我正在创建一个小工具来说明偏光镜片的好处.基本上,用户将镜头(Raphael.js路径)拖过一个令人眼花缭乱的场景(容器DIV的CSS背景)并"透视"镜头.这是js代码:
var rsr = Raphael("playmask", 720,540);
// Lens path
var path_f = rsr.path("M0,73.293c0.024-39.605,17.289-53.697,35.302-61.34C53.315,4.312,99.052-0.012,119.011,0 c38.56,0.021,43.239,11.164,43.229,29.9c-0.002,3.45-0.76,28.632-16.349,58.949c-10.332,20.092-28.434,60.424-76.452,60.396 C29.821,149.223-0.022,112.898,0,73.293 M200.594,29.922c0.011-18.734,4.699-29.871,43.262-29.851 c19.96,0.013,65.691,4.39,83.695,12.052c18.005,7.662,35.254,21.772,35.231,61.379c-0.023,39.606-29.909,75.896-69.526,75.872 c-48.02-0.027-66.076-40.377-76.384-60.484C201.32,58.557,200.594,33.373,200.594,29.922");
path_f.attr({"stroke-width":2, fill:'url(img/polarized.jpg)'} );
var move = function(dx,dy){
this.translate( dx-this.ox, dy-this.oy );
this.ox = dx;
this.oy = dy;
},
start = function(){
this.ox = 0;
this.oy = 0;
},
end = function(){
};
path_f.drag(move,start,end);
该#playmaskdiv有这个CSS(只是"非偏振"背景图像和尺寸):
#playmask{
height:540px;
width:720px;
background: url(img/unpolarized.jpg);
}
我坚持的是:
- Chrome/Firefox一如既往地发挥出色:镜头形状显示出来,填充图像看起来"固定",同时拖动镜头(见第一张照片);
- IE版本7,8,9可以工作,但是(惊喜!)它们的行为方式不同:填充图像"胶合"到镜头形状(参见第二张附图).
我在这里要问的是:我能否以相似的方式使IE9/8/7表现出来,即在拖动镜头时保持填充图像的固定？如果是这样,怎么样？
Firefox截图:
IE9截图:
编辑 使用Modernizr检测浏览器功能,我注意到这种奇怪的行为似乎与IE 的"无笑"功能有关.
我发现IE9的一个奇怪的行为......背景不"粘",但如果我拖动面具,选择一些文字并按下鼠标右键,它会将"偏振"背景刷新到正确的位置!
编辑2(2012年5月21日)还没有解决方案:(但更确切地说,它与"无笑"功能无关 ;并且,重现IE9上的错误的正确方法是拖动玻璃周围,在页面的其余部分选择一些文字,然后滚动弹出的加速器图标(蓝色的箭头中有一个箭头).眼镜bg在正确的位置神奇地"刷新". …
推荐指数
解决办法
查看次数
使用javascript以编程方式创建SVG图像元素
就像我的标题所说,我正在尝试使用javascript以编程方式在HTML页面中创建SVG图像元素.由于某些原因,我的基本javascript代码无法正常工作,但是如果我使用raphaeljs库它可以正常工作.所以我的js显然有问题 - 我似乎无法弄清楚它是什么.
(注意:目标浏览器是FF4 +)
这是一个基本页面,其中包含我想要达到顶部的html版本:
<html>
<head>
<script type="text/javascript" src="http://raphaeljs.com/raphael.js"></script>
</head>
<body>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="test1"
height="200px"
width="200px">
<image
id="testimg1"
xlink:href="http://i.imgur.com/LQIsf.jpg"
width="100"
height="100"
x="0"
y="0"/>
</svg>
<hr />
<p id="testP1">
</p>
<hr />
<p id="testP2">
</p>
</body>
</html>
这是我的javascript:
var paper = Raphael(document.getElementById("testP1"), 200, 200);
paper.image("http://i.imgur.com/LQIsf.jpg", 0,0, 100, 100);
var svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
svg.setAttributeNS('http://www.w3.org/2000/svg','xlink','http://www.w3.org/1999/xlink');
svg.setAttributeNS('http://www.w3.org/2000/svg','height','200');
svg.setAttributeNS('http://www.w3.org/2000/svg','width','200');
svg.setAttributeNS('http://www.w3.org/2000/svg','id','test2');
var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','height','100');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','width','100');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','id','testimg2');
svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href','http://i.imgur.com/LQIsf.jpg');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','x','0');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','y','0');
svg.appendChild(svgimg);
document.querySelector('#testP2').appendChild(svg);
推荐指数
解决办法
查看次数