2017-01-11 6 views
0

SQLデータベースにステンシル(SVG)をインポートできるWindowsアプリケーション(ソースコードなし)があります。そこから、アプリケーションは図面面に挿入します。あなたはお互いの上に複数のステンシル層を持つことができます。透過性がある場合、クリックして下にあるステンシルを選択できるはずです。トランスペアレントなSVGオブジェクトをオーバーレイするSVGオブジェクトにクリックする方法は?

特定の条件に基づいて異なるバージョンのステンシルを頻繁に変更するストアドプロシージャがあります。私は、あるステンシルの高さ/幅から別のステンシルの高さ/幅への歪みに関する問題を抱えていました。

私は両方の問題を解決する方法を見つけなければなりませんでした。おそらく私が思いついたのは正しい方法ではありませんが、私はSVGの専門家ではありません。ステンシル内のsvgオブジェクトの高さと幅を設定しても何も修正されなかったので、私はrectを透明に塗りつぶして、その高さと幅をルートと同じ値に設定しましたsvgオブジェクト。このようにして、ストアドプロシージャがどのように切り替えられても、ステンシルは中央に配置されることが保証されました。

すべてが素晴らしく、私は完了したと思った。しかし、固定幅では、rectfill:none;stroke:none;stroke-width:0;に設定しても、クリック可能な空白スペースを持つ長方形が作成されました。そのステンシルの下にあるものをクリックすることはできません。

「透過」空白スペースをクリックスルーして下にあるステンシルを選択できるようにするには、ステンシルの高さと幅をリサイズで真にできるようにするためには何が必要ですか?

CodePen

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" 
    width="60" viewBox="0 0 60 30" preserveAspectRatio="xMidYMid meet"> 

    <style type="text/css"> 
    <![CDATA[ 
    .st1 {fill:none;stroke:#0000ff;stroke-dasharray:1.2,2.4;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2} 
    .st2 {fill:none;stroke:none;stroke-width:0;} 
    ]]> 
    </style> 

    <g> 
    <rect class="st2" height="30" width="60" x="0" y="0" /> 
    </g> 

    <g> 
    <path class="st1" d="m 20,15 a 10,10 0 1 1 20,0 10,10 0 1 1 -20,0 z" /> 
    </g> 

</svg> 

P.S.アプリケーションが新しいバージョンのSVGをうまく扱えないので、の代わりにcircleを使用しなければならないようです。

答えて

0

私はSVGでも最悪ですが、pointer-events:noneはあなたのために働くでしょうか?これは、要素がマウスイベントを受け付けないようにします:クリック、ホバーなど

+0

遅く応答して申し訳ありません。悲しいかな、これは私たちの問題に全く影響しませんでした。 –

関連する問題