Question

当用户点击按钮时，我想将svg图像的笔触宽度增加0.5。我已经有了click功能，但不知道如何使该功能增加笔画宽度。

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

  drawMapPipes();    
}

.pipe是svg类和drawMapPipes（）;被调用来重绘svg图像。

Answer 1

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

Answer 2

我想出来了......我试图让它变得更加复杂。我刚刚创建了一个新变量并设置了笔触宽度，然后在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);
    });

使用单击函数jquery更改svg图像的笔触宽度

2 个答案: