在SVG图像中插入行

时间:2019-06-25 21:10:21

标签: jquery html css svg highcharts

我想在SVG类型的文档中插入一行。我无法使用Jquery找到像普通HTML这样的元素。下图描述了我要显示的行。用户单击地图区域时,将出现一组线。

https://www.screencast.com/t/UxnsEou6OQI

当百分比值出现时,我想画这条线。那是。当我单击该区域时。要插入DOM的元素如下。

要插入到DOM中以画线的元素。

<svg>
   <line x1="90" y1="70" x2="140" y2="90" style="stroke:#fff;stroke-width:1"/>
</svg>

这是SVG图像的XML文件。在此文件中,您可以找到标签

Testarea

我在代码上有一个函数(jquery),当我在#Tolltip区域中单击时,该函数显示了一个部分。我只想在此功能中添加一个部分以将线添加到特定位置。

这是我功能的切换。

         witch (this.id) {
                  case "Porto":
                    //I want to add here --->       
                    $('#Tooltip').insertBefore("<svg><line x1='90' y1='70' x2='140' y2='90' style='stroke:#fff;stroke-width:1'/></svg>");
                    // this is to set the attributes of the first "g" inside the "svg ->
                    tt.setAttribute('transform', 'translate(0,-350)');
                    break;
                  case 1:
                    alert('1');
                    break;
                  default:
                    alert('default');
                }

继续。我想在一个“ svg”内部的第一个元素“ g”上方插入两个

我知道有点困惑:(

0 个答案:

没有答案