矩形内のすべてのSVG要素をjavacriptで選択する方法

Question

さまざまなタイプのSVGグラフ（barcharts、plots、piechartsなど）を作成する汎用のJavaScriptライブラリを作成しました。 this postのマーキー選択のためのコードもありますが、これはうまく機能します。

私はSVG内にx1、y1、x2、y2座標を持ち、その選択範囲内に少なくとも1ピクセルを持つすべてのSVG要素を簡単に選択する方法を探しています。

点だけのプロットの場合、これは簡単に実行できますが、私は長方形、楕円、およびパスで機能する簡単な汎用ソリューションを探しています。

Answer 1

単純な状況で目標を達成する方法を示すことができますが、提案したすべてのシナリオでは達成できない方法を示すことができます。

単純な解決策は、svgSvgElement.getIntersectionListを使用することです。以下のコードはこれを示しています。選択された矩形で3つの色付き三角形のどれが「当たった」かを決定する方法を示します。ただし、要素が選択矩形と重複していないが、要素バウンディングボックスが選択矩形と重複していないと判断することに注意してください。したがって、下の青色の三角形は期待どおりに重なり合うと考えられ、赤い三角形は予想どおり重複していないと見なされますが、緑色の三角形はと重なっていると見なされます。どの形状自体が長方形と重なり合っているかを実際に決定することは、より複雑であり、時間の幕開けから多くの髪を引っ張る原因となっている。

const qs = (selctr) => document.querySelector(selctr); 
 

 
const svg = qs('svg' ); 
 
const green = qs('#green'); 
 
const blue = qs('#blue'); 
 
const red = qs('#red' ); 
 

 
const r = svg.createSVGRect(); 
 
r.x = 10; 
 
r.y = 10; 
 
r.width = 100; 
 
r.height = 40; 
 
const nodeList = svg.getIntersectionList(r, null); 
 
const arr = Array.from(nodeList); 
 
console.log('The following triangles "overlap" the black rectangle:'); 
 
console.log('green:', arr.indexOf(green) >= 0, '(?!)'); 
 
console.log('blue: ', arr.indexOf(blue) >= 0); 
 
console.log('red: ', arr.indexOf(red ) >= 0);

<svg> 
 
    <g fill="none" stroke-width="1" stroke-dasharray="2" opacity="0.5"> 
 
    <rect x="25" y="10" width="100" height="40" stroke="black"/> 
 
    <rect x="10" y="40" width="20" height="40" stroke="green" transform="translate(0)"/> 
 
    <rect x="10" y="40" width="20" height="40" stroke="blue" transform="translate(50)"/> 
 
    <rect x="10" y="40" width="20" height="40" stroke="red" transform="translate(120)"/> 
 
    </g> 
 
    <g opacity="0.5"> 
 
    <path id="green" fill="green" d="M10,40 L30,60 20,80" transform="translate(0)"/> 
 
    <path id="blue" fill="blue" d="M10,40 L30,60 20,80" transform="translate(50)"/> 
 
    <path id="red" fill="red" d="M10,40 L30,60 20,80" transform="translate(120)"/> 
 
    </g> 
 
</svg>

それは、このための回避策の一種としてsuggested that you could use document.elementFromPointてきました。たとえば、4つのコーナーポイントのいずれか、または選択矩形の中心点がシェイプの内側にあるかどうかをテストできます。質問/問題をよりよく理解するために

<svg> 
 
    <rect x="10" y="10" width="50" height="50" fill="none" stroke="black" stroke-width="1" stroke-dasharray="2" opacity="0.5"/> 
 
    <path fill="red" opacity="0.5" d="M45,30 L80,0 90,70"/> 
 
</svg>