用点击功能改变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

回答

相关问题