クリック機能jvery

Question

を使用してsvg画像のストローク幅を変更するユーザーがボタンをクリックしたときに、svg画像のストローク幅を0.5増加させたいとします。私はすでにクリック機能を持っていますが、ストロークの幅を広げるために関数をどのように取得するかはわかりません。 .pipeはsvgクラスであり、drawMapPipes（）;。 svgイメージを再描画するために呼び出されます。

Answer 1

私は..私はそれをしなければならなかった、それはより複雑にしようとしていたことを考え出しました。私はちょうど新しい変数を作成し、ストロークの幅を設定してから、その関数をclick関数内に追加しました。

$("#increasePipe").click(function(){ 
     map.pipeSize += 0.25; 
     if (map.pipeSize > map.pipeSizeMax){ 
      map.pipeSize = map.pipeSizeMax; 
     } 
     map.svg.selectAll(".pipe").style("stroke-width", map.pipeSize); 
    }); 

Answer 2

通常のjQueryのみを使用しているとします。ストロークの幅を調整する方法は次のとおりです。

いくつかのSVGプロパティーを変更するには、スタイルプロパティー名と異なる名前を持つものがいくつかあるため、少し追加する必要があります。

たとえば、属性の名前はstroke-widthですが、styleプロパティの名前はstrokeWidthです。

$("button").click(function(evt) { 
 
    var myLine = $("line"); 
 
    // Get the current stroke-width. 
 
    // Try getting it from the style object first. Otherwise get it direct 
 
    // from the attribute value. 
 
    // We use parseInt() to strip off any units ("20px" -> 20) 
 
    var currentWidth = parseInt(myLine.css("strokeWidth") || myLine.attr("stroke-width"), 10); 
 
    // Update the style property "strokeWidth". 
 
    // Note that the property has a different spelling to the attribute. 
 
    myLine.css("strokeWidth", 30 - currentWidth); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<svg> 
 
    <line y1="75" x2="300" y2="75" stroke="black" stroke-width="10"/> 
 
</svg> 
 

 
<button>Click me</button>