評論在SVG路徑

我與jQuery和SVG實驗，我做了我的道路，但現在我想改變這種狀況（基於一些用戶輸入）我做這樣的事情評論在SVG路徑

 
    var dpath = $('path').attr("d"); 
    $('path').attr("d",dpath.replace("150 150", "450 450"));

工作正常，但是這當我的路徑增長時沒有用，所以我想知道是否有可能將標籤或註釋放在路徑中作爲替換鉤子？搜索「svg路徑評論」的以「評論」的形式向我提供論壇中的所有條目，這不是非常有用。我接近編寫自己的「可替換」僞svg路徑代碼，但在svg中有沒有其他可能的替代方案？關於， Jeroen。

來源

2010-04-04 dr jerry

SVG具有到非序列化形式的路徑元素的接口。它的描述在the SVG spec。您應該可以通過添加自己的屬性來充當標記來擴展對象。

我從來沒有使用的界面，但你應該能夠使用pathSegList屬性（在SVGAnimatedPathData定義）由沿$("path")[0].pathSegList的線（[0]做一些訪問路徑段的名單是那裏得到到實際DOM元素而不是jQuery對象）

來源

2010-04-04 11:23:11

查看http://dev.w3.org/SVG/profiles/1.1F2/test/svg/paths-dom-02-f.svg舉例。 – 2010-04-06 09:20:44

這真的很酷。 – 2013-06-18 16:33:50

[0]對獲取pathSegList屬性至關重要。 – shaosh 2015-01-28 18:04:02

大部分pathSegList方法都需要檢索/操作的段的索引，因此可能會出現序列化表示更好的場景。取0個單位的相對移動（例如'm 0,0'）作爲替代鉤子。因爲你有相對繪圖的不同pathh命令，你甚至可以用上下文來爲你的鉤子賦值。請注意，如果您考慮像'm 0，m 0， - '這樣的模式，nops的數量是無限的 - 您的里程可能會根據您的svg生成器的質量而有所不同。

請注意，js replace方法在正則表達式上運行，因此您不需要替換掛鉤就可以添加或預先添加路徑段。

最好的問候，卡斯滕

PS：我知道馬蒂斯答案已經存在了很長一段時間......

來源

2011-03-23 08:23:55 collapsar

這是其中一條線的終點正在使用jQuery移動爲例SVG：

$('#svgdiv').svg();       //svgdiv - the id of the html element that contains your svg canvas. 
var svg = $('#svgdiv').svg('get'); 
var linePath = $($('#linePath'), svg.root()); //linePath - the id of the path element whose end point coordinates I want to change. 
var segments = linePath[0].pathSegList; 
for (var i=0; i < segments.numberOfItems; i++){ 
    var segment = segments.getItem(i); 
    switch(segment.pathSegType){ 
    case SVGPathSeg.PATHSEG_LINETO_ABS: 
    segment.x = x; 
    segment.y = y; 
    //other cases.. 
    } 
}

如果在相同的路徑多條線段並希望改變特定段，則需要

通過將pathSegList段索引存儲在變量中來跟蹤該行。
或者如果您的用戶輸入是鼠標點擊，請使用鼠標單擊座標來查找該段。

This關於SVGPathElement的好貼子。 This是SVG DOM文檔。

來源

2011-08-21 07:14:51 rolnn

評論在SVG路徑

回答

相關問題