2017-09-13 76 views
0

我需要知道svg對象是否與另一個svg對象相鄰。所以我需要得到它的邊界。這些對象可以是矩形或路徑。當他們是直的時候,這很容易,但當他們彎曲或彎曲時,我不知道該怎麼做。獲取彎曲的svg對象的呈現邊框

我的意思的例子可以發現here或短的例子在這裏:

<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 200 512 512"> 
    <path d="m 223.40414,282.21605 35.53211,-3.88909 0,-18.73833 -19.79899,-0.17678 c -5.83251,7.19542 -10.70707,15.0451 -15.73312,22.8042 z" id="pB"></path> 
</svg> 

如果我使用的盒的角落,我創建了一個virtual直矩形,其相鄰的對象不等於鄰道的渲染對象。 我該怎麼做?

+0

https://www.w3.org/TR/SVG/paths.html#__svg__SVGPathElement__getPointAtLength –

回答

0

Snap庫爲您的問題提供了一些不錯的工具。你的問題沒有定義「相鄰」應該是什麼意思。這裏是設定閾值的最大距離爲路徑之間的函數:

var threshold = 1; 

function isAdjacent (id1, id2) { 
    var s = Snap("#mysvg"); 
    var first = s.select('#' + id1); 
    var second = s.select('#' + id2); 

    var len = first.getTotalLength(first); 

    var p1, p2; 
    for (var at = 0; at <= len; at += threshold) { 
     p1 = first.getPointAtLength(at); 
     if (Snap.closestPoint(second, p1.x, p1.y).distance <= threshold) { 
      return true; 
     } 
    } 
    return false; 
} 

JsFiddle