标签: jquery-svg

我正在使用jQuery SVG.我无法在对象中添加或删除类.谁知道我的错误？

SVG:

<rect class="jimmy" id="p5" x="200" y="200" width="100" height="100" />

不会添加类的jQuery:

$(".jimmy").click(function() {
    $(this).addClass("clicked");
});

我知道SVG和jQuery正在协同工作,因为我可以定位对象并在单击时触发警报:

$(".jimmy").click(function() {
    alert('Handler for .click() called.');
});

我正在尝试创建一个交互式地图,用户可以在地图中点击不同的省份以获取该省的特定信息.

示例:http: //www.todospelaeducacao.org.br/ http://code.google.com/p/svg2imap/

到目前为止,我只发现功能有限的解决方案.我只是使用SVG文件搜索过这个,但是如果可能的话,我会对其他文件类型开放.

如果有人知道一个完全功能的方法(jQuery插件,PHP脚本,矢量图像)或如何手动执行它的教程请分享.

我想在jquery中获取svg路径的getBBox().我试过这样的

$("#"+ path id)[0].getBBox() -> returns x=0,y=0,width=0,height=0

我已经添加了SVG元素的路径.我在SVG中尝试了一些其他元素,例如文本节点,在这种情况下它返回一些边界框值.

如何计算SVG中路径的边界框？

<path id="container_svg_John_0" fill="none" stroke-width="3" stroke="url(#container_svg_John0Gradient)" stroke-linecap="butt" stroke-linejoin="round" d="M -2390.2 -125.8888888888889 L 0 0 M 0 0 L 251.60000000000002 -45.77777777777778 M 251.60000000000002 -45.77777777777778 L 503.20000000000005 -11.444444444444445 M 503.20000000000005 -11.444444444444445 L 629 -183.11111111111111 "/>

我不知道为什么,但它适用于Chrome和Safari,而不适用于Mozilla.我有object加载svg文件的html标签.文件包含.s0类.我想在你点击那个课时处理事件.

谁知道出了什么问题？sry,object当我试图在那里粘贴代码时,jsfiddle没有显示.

<object data="jo.svg" type="image/svg+xml" id="obj"></object>

码

$(function() {
    var a = document.getElementById('obj');
        a.addEventListener("load", function() {

            // !!!
            console.log('this line is not reachable in Mozilla or reached before svg loaded');

            var svgDoc = a.contentDocument;
            var els = svgDoc.querySelectorAll(".s0");
            for (var i = 0, length = els.length; i < length; i++) {
                els[i].addEventListener("click", function() {
                    alert('clicked');
                }, false);
            }
        });
});

ASAIK jquery动画功能仅接受样式属性.但我想动画一个元素的属性.考虑一个SVG元素矩形

<svg>
<rect id="rect1" x=10 y=20 width="100px" height="100px">
</svg>

我想动画矩形元素属性"x"和"y",如下所示

$("#rect1").animate({
    x: 30,
    y: 40
  }, 1500 );

但这不是正确的方法,因为动画功能会影响样式而不是元素的属性.

我知道有很多自定义插件就像raphel.js.

http://raphaeljs.com/

但我不想使用自定义插件来做到这一点.我想简单地在jquery.animate函数中这样做.

这可能吗 ？

谢谢,

湿婆

我有一个带有包含div的foreignObject的SVG元素.然后在我的js中我这样做:

$("#wrapper>svg>foreignObject>div").sparkline(data);

在div中创建一个画布.当我看两个浏览器的firebug html代码时:

火狐:

<svg>
    <foreignObject width="20" height="20" x="10" y="-10">
       <div>
          <canvas style="display: inline-block; width: 18px; height: 19px; vertical-align: top;" width="18" height="19"></canvas>
       </div>
    </foreignObject>
</svg>

铬:

<svg>
    <foreignobject width="20" height="20" x="10" y="-10"/>
<svg>

在chrome中它甚至不显示div.我创建div的方式是

nodeEnter.append("foreignObject")
  .attr("width", "20")
  .attr("height", "20")
  .attr("x", "10")
  .attr("y","-10");

$("#wrapper>svg>foreignObject").append("<div></div>");

Firefox正在运行,因为我期待它能够正常运行.但铬没有.有没有人有什么建议？

此外,我认为问题的一部分是chrome firebug HTML输出显示"foreignobject",但Firefox以我追加的方式显示"foreignObject".

我的应用程序中有一个svg.喜欢

<svg id="gt" height="450" width="300" xmlns="http://www.w3.org/2000/svg">
<image id="1_dice" x="0" y="420" height="30" width="30" xlink:href="images/1_coin.png" />
</svg>

我有一个名为'1_dice'的svg元素.在HTML按钮单击中,我希望根据参数为元素设置动画.喜欢

$('#btn').click(function(){
     $('#1_dice').animate({'x':200},2000);
});

我尝试了这个,但这不起作用......

我刚刚开始使用D3.js,我想创建类似于我们在Paint中绘制线条的东西.步骤应该相同: - 单击屏幕上的某个点 - 拖动到目标以创建一条线.

我现在遇到麻烦的是当你将鼠标拖到目的地时,该线应该根据你的鼠标移动.我怎样才能做到这一点？

谢谢.

我想在固定位置缩放下面的元素.

<path id="container_svg_rectsymbol1" fill="red" stroke-width="1" stroke="Gray" d="M 73.1111111111111 -71.75 L 83.1111111111111 -71.75 L 83.1111111111111 -61.75 L 73.1111111111111 -61.75 L 73.1111111111111 -71.75" transform="scale(1)"/>

当我开始缩放时,它从一个位置移动到另一个位置.我不想移动对象我只想扩大对象的大小.

我已经提到以下链接.

http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System

怎么做固定缩放？

我想为元素设置动画,即在固定位置放大尺寸.我已按以下方式实施.但它会从原点移动元素.请参考以下代码.

 var box = element.getBBox();
 var scaleVal=null, x=null, y=null;
 $(element).animate(
     {
          scale: 1,
          centerX:box.x+(4*transX),
          centerY:box.y+(4*transY)
     },
     {
          duration: 4000,
          step: function(now,fx) {
              if (fx.prop == "scale") {
                   scaleVal = now;
              } else if (fx.prop == "centerX") {
                   x = now;
              } else if (fx.prop == "centerY") {
                   y = now;
              }

              if(!sf.util.isNullOrUndefined(scaleVal) && !sf.util.isNullOrUndefined(x) …

为了渲染SVG我正在使用jQuery SVG插件.而且,现在我想为每个路径和多边形添加文本.在jsFiddle上,您可以看到插件生成的标记.

为了创建文本,我编写了以下代码:

var svgg = $("#rsr").svg('get');
var texts = svgg.createText();
svgg.textpath($("#Layer_x0020_1"),id, texts.string('We go ').
   span('up', { dy: -30, fill: 'red' }).span(',', { dy: 30 }).
   string(' then we go down, then up again'));

在jsFiddle的代码中,您可以看到textpath标记存在,但它不可见.如何将文本添加到每个路径的中心？
谢谢.