标签: jquery-svg

我有这样的代码,使用jQuery-svg

function replaceRaster(){
    $('#png').remove()
    a = $('#graphic')
    b = a.svg(a)
    a.load('IDC_Energy.svg',
         {onLoad:bind} )
   svg = document.getElementById("graphic").children[0]
   console.log(svg)
   svg.addEventListener('load', bind)
}

bind在jQuery-svg-dom能够选择SVG数据中的元素之前,会触发事件处理程序.我的代码应该查看SVG并分配各种类并将侦听器附加到各种元素,但它无法找到任何元素.如果我bind在加载完所有内容后调用控制台,它可以找到所有SVG元素.

难道我做错了什么？有没有其他方法可以检测SVG DOM何时可用？我曾经想过使用一个计时器,但这真的很糟糕,特别是考虑到我的SVG文件可能只有几MB.

我想基于鼠标移动移动矩形.请参考以下链接.

http://atomicrobotdesign.com/blog_media/draw/draw1.html

在mousedown事件中获取矩形起始位置并开始拖动它将在鼠标移动事件中创建矩形.但是当我移动到先前的值(即移动到小于鼠标按下值时,它将返回负值),因此宽度变为负值.

上面的链接是画布矩形.但我创建了具有相同逻辑的svg矩形.

不支持矩形的负宽度？或者如何根据鼠标移动移动矩形？

什么出错了？

我的代码片段.

ChartMouseDown:function(e){

//       e = this.normalizeMouseEvent(e);


      var mousedownCords=this.calMousePosition(e);
      this.mouseDownX=mousedownCords.X;
      this.mouseDownY=mousedownCords.Y;

      this.chartMouseDownPoint= this.GetValuebyPoint(Math.abs(this.mouseDownX-this.model.m_AreaBounds.X),Math.abs(this.mouseDownY-(this.model.m_AreaBounds.Y + this.model.m_AreaBounds.Height)));
      this.zoomingX=true;

    },



ChartMouseMove: function (evt) {

    if( this.zoomingX)
    {

    var mouseMoveX,mouseMoveY;

     var mouseMoveCords=this.calMousePosition(evt);
      mouseMoveX=mouseMoveCords.X;
      mouseMoveY=mouseMoveCords.Y;
      $(this.ZoomAreaRect).remove();
      var width =  Math.abs(mouseMoveX - this.mouseDownX);
      var height = mouseMoveY - this.mouseDownY;
      var x;
      if(mouseMoveX > this.mouseDownX)
      x= this.mouseDownX;
      else
      x= mouseMoveX;

       this.ZoomAreaRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");

        $(this.ZoomAreaRect).attr({
            'id': 'ZoomArea', 'x': x, 'y': this.model.m_AreaBounds.Y, 'width': width, 'height': this.model.m_AreaBounds.Height,
            'fill': 'gray', 'stroke-width': 1, 'stroke':'gray'
        });

       $(this.ZoomAreaRect).appendTo(this.SvgObject); …

我的应用程序中有一个SVG路径元素,如:

<path d="M100,100 Q200,400,300,100"/>

在按钮单击中,我必须将此路径移动到左侧,例如,从100到200.我使用转换完成了:

$('.path').each(function () {
    $(this).attr('transform', 'translate(100, 0)');
});

但是,在下一次单击时它不会移动.如何在每次点击时获取路径元素？

我是 SVG 的新手。我想知道我可以使用什么属性向 SVG 代码中的椭圆元素添加轮廓/边框？实际上，我正在尝试使用 SVG 和 jQuery 制作交互式图表，因此我需要让某些选定的椭圆元素在事件发生时显示特定颜色（如深红色）的实心轮廓。我想知道如何做到这一点。

谢谢！

我是 svg 新手。我有两个 svg 图像，我需要在一个 svg 图像中的路径周围附加链接，单击该路径我应该导航到另一个 svg 图像。

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <g id="path1">
     <a xlink:href="" target="_top">
       <path id="parcel" />
     </a>
     </g>
 </svg>

我应该如何将属性添加到我的应用程序（html）中并使用 javascript 将 href 链接附加到它。提前致谢

我有textContent"Design"和text-anchor作为开头的文本,用css转换为45度旋转.所以它旋转了.问题是我需要调整旋转后文本的(x,y)位置,以显示勾选之间的文本,如预期图中所示.我怎样才能做到这一点.

结果:http: //imageshack.us/content_round.php？page = done&l = img404/2711/result1h.png

预期:http://imageshack.us/content_round.php？page = done&l = img266 / 5138 / expected1.png

    <svg>
    <text x="100" y="100" width="64" height="16" fill="black" transform="rotate(45,100,100)" text-anchor="start">Design</text>
    </svg>

谢谢Gowri

有什么方法可以使用SVG中的线连接两个点。我在SVG中创建以下点。

<?xml version="1.0" standalone="no"?>

<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <path d="M10 10"/>

  <!-- Points -->

  <circle cx="10" cy="10" r="2" fill="red"/>
  <circle cx="90" cy="90" r="2" fill="red"/>
  <circle cx="90" cy="10" r="2" fill="red"/>
  <circle cx="10" cy="90" r="2" fill="red"/>

</svg>

我需要使用jquery函数在点之间画一条线。

我有座位表.当我点击一个座位时,我想显示一个加载的GIF.座位表来自svg文档.座位是svg元素.当ajax响应返回时,我想隐藏加载gif.我在下面写了代码,但它不起作用.

<section>
    <div class="parent" style="text-align: center;">      
        <div class="panzoom" style="width: 500px; height:375px;">  
        <div class="loading" style="display:none" id="loading"><img src="../../Scripts/spinner.jpg" style="width:200px; padding-left:175px;"/></div>     
        </div>   
   </div>
   <div class="seperator"></div>
   <div class="buttons" style="text-align:center;">
        <input type="range" class="zoom-range">
        <a class="button reset">S?f?rla</a>
   </div>   
    <script>
            $(function () {
            var $section = $('section').first();
            $section.find(".panzoom").svg({
                loadURL: "https://resources-biletino.s3.amazonaws.com/content/venue/17/seatChart-01.svg",onLoad:function(){ 
                    initAll();
                }
            });

            $section.find(".panzoom").panzoom({
                $zoomRange: $section.find(".zoom-range"),
                $reset: $section.find(".reset"),
                cursor: "auto",
                increment: 0.6
            });
        });

        function seatObject(id, label, status, token){
             this.id = id;
             this.label = label;
             this.status = status;
             this.token = token;
        }

        var seats = [];

        function …

我正在使用svg和它的dom操作.我想为位于<g>标记内的一组svg元素创建边框.我该怎么做呢？是否有可能创建圆形/椭圆形边界？我正在使用jQuery SVG库.提前致谢

<g>
<rect x="20" y="30" width="200" height="300" fill = "red"/>
<circle cx="40" cy="50" r="25" fill="blue"/>
</g>

我想改变这个文本 - svg的一部分:

<text id="VL_temp" xml:space="preserve" style="font-size:40px;font-style:normal;font-weight:normal;line-height:100%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans;font-stretch:normal;font-variant:normal;text-anchor:start;text-align:start;writing-mode:lr" x="432.24234" y="110" sodipodi:linespacing="100%">**--**</text>

我想显示一个温度,它来自我尝试使用以下代码的KNX安装,但没有任何反应:

   <script>
<![CDATA[
var thisGA = '14/0/4';
var thisTransform = 'DPT:9.001';
visu = new CometVisu('/cgi-bin/');
visu.update = function ( json )
{
  var temp = Transform[thisTransform].decode( json[thisGA] );
  $('#VL_temp', svg.root()).text('temp');
}
$(window).unload(function() {
  visu.stop();
});
visu.user = 'demo_user';
visu.subscribe( [thisGA] );
]]>

什么是以$('#VL_temp'开头的行的问题？其余代码似乎没问题,因为这部分在另一个svg中使用jquery(svn-link到svg)

是否有办法获取svg路径的尺寸并将其显示在div中？边界框不是一个选项,因为当它涉及贝塞尔曲线时,它在Webkit中是错误的.我正在修改svg-edit btw:https://code.google.com/p/svg-edit/

这就是我目前使用的.

    <script>
    var myVar=setInterval(function(){getDimensions()},10);

    function getDimensions() 

    {

  svgNode = svgCanvas.getSelectedElems()[0];


var getw = svgNode.getBoundingClientRect().width;
var geth = svgNode.getBoundingClientRect().height;
getw= parseInt(getw);
geth= parseInt(geth);
 document.getElementById('heightbox').innerHTML = geth;
 document.getElementById('widthbox').innerHTML = getw;



}

    </script>

不幸的是,边界框是不可靠的.除了bbox之外的任何想法？

我已经将我们的图表系列分组并使用剪辑概念以及svg中的转换逻辑

请参考下面的剪辑路径.它指的是图表区域.

<defs><clipPath id="container_svg_ChartAreaClip"><rect id="container_svg_ChartAreaClipRect" x="65" y="46" width="715" height="428" fill="white" stroke-width="1" stroke="Gray"/></clipPath></defs>

请参考以下组:

<g clip-path="url(#container_svg_ChartAreaClip)" id="container_svg_SeriesCollection" transform="translate(65,474)"><path id="container_svg_John_0" fill="none" stroke-width="2" stroke="#AFB117" stroke-linecap="butt" stroke-linejoin="round" d="M 62.307142857141926 -0.09416 L 53.11428571428618 -0.5136 M 53.11428571428618 -0.5136 L 71.5 -0.27392 M 71.5 -0.27392 L 81.71428571428571 -0.9416000000000001 M 81.71428571428571 -0.9416000000000001 L 91.92857142857142 -2.0115999999999996 M 91.92857142857142 -2.0115999999999996 L 102.14285714285714 -3.15864 M 102.14285714285714 -3.15864 L 112.35714285714286 -5.478400000000001 M 112.35714285714286 -5.478400000000001 L 122.57142857142857 -8.602799999999998 M 122.57142857142857 -8.602799999999998 L 132.78571428571428 -12.292159999999999 M 132.78571428571428 -12.292159999999999 L 143 -17.659280000000003 M 143 -17.659280000000003 …

我需要为每个单元格定义鼠标单击事件.我用cell:pointerup事件; 但是当我改变细胞位置时会触发此事件.我如何区分这两个事件？

提前致谢.