用點擊功能改變svg圖像的筆畫寬度jquery

我想在用戶點擊一個按鈕時將svg圖像的筆觸寬度增加0.5。我已經有點擊功能，但不知道如何讓函數工作來增加筆畫寬度。用點擊功能改變svg圖像的筆畫寬度jquery

function pipeScaleFactorPlus(){ 
    $(".pipe").style("stroke-width", "+=0.5"); 

    drawMapPipes();  
}

.pipe是svg類和drawMapPipes（）;被調用來重繪svg圖像。

來源

2016-11-17 lostInTheTetons

您可以創建[mcve]嗎？即我們可以運行的東西，即使它壞了。 –

你還需要什麼，比如點擊功能？我很難在codepen.io或其他東西上創建一個例子。我正在從數據庫中提取svg以在地圖上創建管道。 – lostInTheTetons

你的例子不需要複製數據庫的東西，它只需要一個預先創建的對象，它的筆觸寬度是你想要調整的。 –

我想通了。我試圖讓問題更加複雜那麼它必須是。我剛剛創建了一個新變量並設置了筆劃寬度，然後在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); 
    });

來源

2016-11-17 16:51:35 lostInTheTetons

假設您只使用普通的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>

來源

2016-11-17 16:22:31

用點擊功能改變svg圖像的筆畫寬度jquery

回答

相關問題