Question

如果我将鼠标悬停在矩形上，则边框大小超出矩形大小。我知道因为父节点宽度是class AddElement { public static void main(String s[]) { int arr[] ={2,3}; int add[] = new int[arr.length+1]; for(int i=0;i<add.length;i++){ if(i==add.length-1){ add[i]=4; }else{ add[i]=arr[i]; } System.out.println(add[i]); } } }，这就是显示矩形边框的原因。

如果我将父节点宽度设置为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;
}

Answer 1

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

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

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

<强> FIDDLE

Answer 2

你是说这个意思吗？更改填充颜色会更简单。

其他方法是创建clipPath或使用剪辑CSS属性。

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<svg id='par' width="100" height="40">
  <svg width="40" height="40">
      <rect id='ch' width="40" height="40" style="fill:rgb(0,0,255)" />
  </svg>
</svg>

＆＃13;

Answer 3

找到了答案，

<svg width="100" height="100">
    <defs>
        <clipPath id="clipRect">
            <rect width="40" height="40" />
        </clipPath>
    </defs>
    <rect id ='ch' width="40" height="40" clip-path=url(#clipRect)   style="fill:rgb(0,0,255)" stroke-width="8px" stroke="red" />
</svg>

Sample

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

3 个答案: