javascript - 如何在 svg 中设置确切的宽度

Question

如果我将鼠标悬停在矩形上，边框大小会超过矩形大小。我知道因为父节点宽度是 100 这就是显示矩形边框的原因。

如果我将父节点宽度设置为 40，它工作正常但我需要相同的行为而不更改父节点的 width 和 stroke-width.

我怎样才能做到这一点？

// In mouse hover, I have set the style:
var links = $('#ch');
links.hover(function() {
  $('#ch').attr('class', 'st');
}, function() { //mouseout
  $('#ch').attr('class', '');
});

.st {
  stroke-width: 60px;
  stroke: red;
}

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

<svg id='par' width="100" height="40">
  <rect id='ch' width="40" height="40" style="fill:rgb(0,0,255)" />
</svg>

Answer 1

阻止 svg 溢出的是你的 UA 样式(在 chrome 上)中的 svg:not(:root){overflow:hidden}，

因此，如果您将它设置为visible，它将起作用:

svg:not(:root) { overflow : visible; }

FIDDLE