Tag: svg

使用jQuery创建和访问SVG标记？

可以在jQuery中创建一个SVG标记，如下所示： var dragSVG = $(”); dragSVG.append(”); 然后，如果是这样，如何访问DOM？ 即。 如果是HTML，我会执行以下操作： return dragSVG.html(); 但是因为它不是HTML，所以引发exception…或者我错过了一些完全基本的东西！？ 编辑： 我会试着解释一下我想要更清楚地实现的目标; 我有一个代表SVG’项目’的按钮，可以将其拖动到主SVGcanvas上。 当用户开始拖动时，我想在鼠标下显示SVG“项目”以提供用户反馈。 当用户将其放到canvas上时，我需要将“项目”移动到主canvas上。 $(‘#testBtnDrag’).draggable({ opacity: 0.7, revert: ‘invalid’, cursorAt: { top: 0, left: 0}, helper: function (event) { var dragSVG = ”; return dragSVG; } }); // I can’t attach the droppable to the SVG tag directly, IE / FF don’t […]

点击使SVG可resize

如何通过jQuery UI“点击”设置SVG可resize？ jsfiddle例子 HTML jQuery的 $(‘#svg1’).click(function () { $(“#svg1”).resizable(); }); 来自Alvin.K的解决方案

表头中的垂直文本使用基于JavaScript的SVG库

我使用jqGrid包含许多包含布尔信息的列，这些列在表格中显示为复选框（请参阅http://www.ok-soft-gmbh.com/VerticalHeaders/TestFixedO.htm作为示例）。 为了更紧凑地显示信息，我使用垂直列标题。 它运行良好，可以在所有浏览器中使用jqGrid（请参阅我在jqGrid论坛中与Tony Tomov的讨论http://www.trirand.com/blog/?page_id=393/feature-request/headers-with-vertical-orientation/ ），但在IE中垂直文字模糊，看起来不够好（打开IE上面的链接，你会看到我的意思）。 我被问到用户为什么文本显示得如此奇怪。 所以我正在考虑使用基于JavaScript的SVG库，如SVG Web （ http://code.google.com/p/svgweb/ ）或Raphaël （ http://raphaeljs.com/ ）。 SVG非常强大，很难找到一个好的例子。 我只需要显示垂直文本（-90 grad，自下而上）并尽可能使用，而无需在绝对定位模式下工作。 所以还有一次我的问题：我需要有可能在表头的 元素内显示垂直文本（ – 90度旋转 ）。 我想使用基于JavaScript的SVG库，如SVG Web或Raphaël 。 解决方案必须支持IE6 。 有没有人有一个很好的参考例子可以帮助我做到这一点？ 如果有人发布问题的完整解决方案，我会很高兴。 确切地说，这是我目前的解决方案：我定义 .rotate { -webkit-transform: rotate(-90deg); /* Safari 3.1+, Chrome */ -moz-transform: rotate(-90deg); /* Firefox 3.5+ */ -o-transform: rotate(-90deg); /* Opera starting with 10.50 */ /* Internet […]

Html5拖放svg元素

我想在这里按照html5拖放教程。 我无法在rect元素上注册dragstart事件。 如果我将事件从draggable更改为mousedown则调用handleDragStart处理程序。 请忽略代码中的其他空白注册。 JSFiddle 在这里 svg rect { cursor: move; } SVG/HTML 5 Example loc.js $(document).ready(function() { function handleDragStart(e) { log(“handleDragStart”); this.style.opacity = ‘0.4’; // this ==> e.target is the source node. }; var registercb = function () { $(“#cvs > rect”).each(function() { $(this).attr(‘draggable’, ‘true’); }); $(“#cvs > rect”).bind(‘dragstart’, handleDragStart); $(window).mousedown(function (e) { }); […]

如何一次滚动绘制每个SVG路径（按时间顺序）？

这与此前的post有关。 但是，我认为这是一项重大任务。 所以我把它分解成更小的块。 我制作了一个简单的SVG图像，其中包含一个“路径”和一个“矩形”元素。 用户可以通过向上和向下滚动页面来打开和关闭窗口（向下滚动页面以打开和关闭页面以关闭/“展开”。但是，两个元素同时“绘制”/动画。我想要做的是当用户向下滚动页面，线条路径绘制，然后“rect”元素绘制（后），所以它更流畅和按时间顺序。 the single line svg { position: fixed; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 50%; } /*.line{ stroke-dashoffset:850; stroke-dasharray: 850; } .box { stroke-dashoffset:1852; stroke-dasharray: 1852; }*/ .all{ stroke-dashoffset:2702; stroke-dasharray: 2702; } .straightLine { height: 3000px; position: relative; width: 360px; margin: 40vh auto 0 auto; } […]

在svg中添加一个新行，bug无法看到该行

我想在svg中添加一个新行，当按下添加按钮时，应该在svg中添加一个新行我可以确定该行已添加到元素中，但为什么它不会显示在屏幕上？ #map { border:1px solid #000; } line { stroke:rgb(0,0,0); stroke-width:3; } jQuery(document).ready(function(){ $(“#add”).click(function(){ var newLine=$(”); $(“#map”).append(newLine); }); }) 0, 0 add

莫里斯图。 hover时有自定义工具提示

我正在使用morris.js（它依赖于raphael）来创建堆积条形图。 对于每个堆叠的条形图，我想在条形图中显示各个级别的分割作为工具提示。 我尝试使用hoverCallback:但它似乎并没有让我控制我正在盘旋的特定元素。 我只获得该特定栏的内容。 我在这里设置了一个JSBIN示例： 当您将鼠标hover在条形图上时，它会显示底部条形图的索引。 我想将内容显示为工具提示。 JSBIN示例

将事件附加到SVG路径

我的html中有一个带有标签的SVG地图。 我想附加事件，以便我可以点击它们并触发一些事件。 我知道我可以在多边形元素上使用jQuery附加click事件。 但是这个地图中的某些区域是使用路径制作的，当我点击路径内部而不是路径时，我想触发一些事件。 这样做的方法是什么？ 使用jQuery是首选。

在SVG中创建一个表

我正在尝试在SVG文档中创建一个类似于表的对象。 目前，由于SVG没有表元素，我使用HTML解析器将HTML表（由HTML表生成器中的用户创建）转换为一组SVG对象，并且然后将其添加到我的整体SVG绘图中。 我想知道是否有人能够找到更好的替代方法，例如SVG表构建器？ 我想用Javascript或jquery来完成这个。 任何想法或建议将不胜感激。

jQuery中的attr（）是否强制小写？

我正在尝试操纵svg’viewBox’属性，它看起来像这样： … 运用 $(“svg”).attr(“viewBox”,”…”); 但是，这会在名为“viewbox”的元素中创建一个新属性。 注意小写而不是预期的camelCase。 我应该使用另一种function吗？