我想让一个svg元素(路径,矩形或圆形)能够被拖动并给它调整大小句柄.
但与HTML DOM不同,并非所有元素都有左上角x,y坐标以及围绕内容的框的宽度和高度.这使得制作通用调整大小或拖动过程变得不方便.
让每个路径或圆圈都在自己的svg对象中绘制,给我一个可以玩的盒子是个好主意吗？
如何在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);
我正在使用Raphael库创建一个SVG文本框,并使用从XML文档中提取的动态字符串填充它.
有时,这个字符串比我放置文本框的画布长,所以我需要限制框的宽度,这将自己强制换行(我找不到任何可能的证据)或确保在一定数量的字符后插入'\n'换行符.
那么(1)这是最好的选择吗？(2)我该怎么做？
我有这样的代码,但它不起作用
var t = r.text(100, 100, 'test');
t.attr({font-size: 16});
给我错误
missing : after property id
这里是raphael.js http://raphaeljs.com/reference.html的文档
我使用RaphaëlJavaScript库在HTML页面中创建SVG元素,并使用CodeIgniter作为PHP框架.在CodeIgniter框架中,我需要<base>在HTML文档的头部添加一个标签来使用JS,CSS和图像,但它在SVG元素中引起了一个奇怪的问题.
当我使用<base>标签时,渐变不起作用.相反,该对象变黑.它与图像填充的路径对象的行为完全相同.
这里有一个示例渐变脚本.
几乎所有当前的浏览器(来自github上的patrickhlauke的详细信息,我在SO答案中总结,以及来自QuirksMode的更多信息),触摸屏触摸触发mouseover事件(有时创建一个隐藏的伪光标,保持用户触摸的位置直到它们触摸其他地方).
有时,在触摸/点击和鼠标悬停用于执行不同操作的情况下,这会导致不良行为.
从响应鼠标悬停事件的函数内部,已经传递了该event对象,有什么方法可以检查这是否是从一个元素外部移动到其内部的移动光标的"真正"鼠标悬停,或者它是否是由触摸屏触摸触摸屏行为引起的？
该event对象看起来相同.例如,在Chrome上,由用户触摸触摸屏引起的鼠标悬停事件已经type: "mouseover"没有任何我可以看到的将其识别为触摸相关的事件.
我有想法将事件绑定到touchstart更改鼠标悬停事件,然后事件将touchend删除此更改.不幸的是,这是行不通的,因为事件顺序似乎touchstart→交通touchend→交通mouseover→交通click(我不能附加正规化,鼠标悬停功能,点击不搞乱其他功能).
我以前曾经问过这个问题,但是现有的问题并没有完全消除它:
我能想到的最好的是有一个设置一些全局访问的变量标志一样,也就是说,一个触摸事件window.touchedRecently = true;上touchstart,但不能点击,再经过消除了这个标志,也就是说,一个500毫秒setTimeout.这是一个丑陋的黑客.
注意 - 我们不能假设触摸屏设备没有类似鼠标的漫游光标,反之亦然,因为有许多设备使用触摸屏和类似鼠标的笔,当在屏幕附近悬停时移动光标,或使用触摸屏和鼠标(例如触摸屏笔记本电脑).我的答案中的更多细节如何检测浏览器是否支持鼠标悬停事件？.
注意#2 - 这不是一个jQuery问题,我的事件来自Raphael.js路径,jQuery不是一个选项,它提供了一个简单的vanilla浏览器event对象.如果有一个Raphael特定的解决方案,我会接受,但这是不太可能的,原始的JavaScript解决方案会更好.
我正在做一些教学练习,用XSLT,Javascript和Raphael将XML转换为SVG.我确信这是艰难的方式......但它具有教育意义.
我遇到的问题是创建工具提示.到目前为止,我已经找到了三种方法:
.attr({title: "blah"{)在对象上使用.这是有效的,但拉斐尔并没有正式支持它,我想在工具提示中加入的内容可能有点长,这是人们操作系统在人们读完之前超出工具提示的问题.所以,我想知道的是,向Raphael对象添加工具提示是一种简单可靠的方法,以便当人们鼠标悬停在对象上时弹出工具提示,并在鼠标输出时(但不是之前)消失？
我需要使用raphael.js绘制各种大小的同心弧.我试图理解http://raphaeljs.com/polar-clock.html背后的代码,这与我想要的非常相似,但是,如果没有评论,就很难理解.
理想情况下,我需要一个函数来创建一条距离某个中心点给定距离的路径,从某个角度开始,以某个其他角度结束.
我需要一个小脚本,它将在一个具有2个功能的帧中显示SVG(矢量图像);
可以平移图像(使用光标移动以查看svg图像的不同部分)与谷歌地图相似.
SVG图像也可以放大和缩小到谷歌地图,除了不需要加载新图像,因为图像是矢量.
对于一个类似的脚本我已经看到适用于普通图像格式请参见http://jibbering.com/routeplanner/
如何Raphael在窗口更改时重新缩放画布内的所有元素？
考虑下面的代码/ DEMO如果我重新div container调整我的窗口大小只是缩放,因为我将其宽度设置为窗口宽度的50%而没有(rect,circle或path)更改
码
<div id="container"></div>?
#container{border : 1px solid black ;
width : 50% ;
height:300px}?
var con = $("#container");
var paper = Raphael(con.attr('id'), con.attr('width'), con.attr('height'));
var win = paper.rect(0,0,400,300).attr({stroke: 'black' }) ;
var path = paper.path("M 200 100 l 100 0 z") ;
var cir = paper.circle(50, 50, 40);
raphael ×10
svg ×7
javascript ×6
jquery ×2
bezier ×1
canvas ×1
html5 ×1
html5-canvas ×1
tooltip ×1
touch ×1