如何設置svg中的確切寬度

如果我將鼠標懸停在矩形上，邊框尺寸超過矩形尺寸。我知道，因爲父節點寬度是100這就是顯示矩形邊框的原因。如何設置svg中的確切寬度

如果我將父節點寬度設置爲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>

來源

2015-05-22 Akbar Basha

我不清楚你想要什麼。將外部svg元素包裹在內部svg元素寬度/高度40中嗎？ –

找到了答案，

<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

來源

2015-05-22 11:00:58

是什麼原因導致的SVG溢出是在你的UA風格（在Chrome）svg:not(:root){overflow:hidden}，

所以，如果你把它設置爲visible它會工作：

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

FIDDLE

來源

2015-05-22 10:17:02 maioman

這是不正確的..在默認svg矩形行爲是，如果我們設置筆劃爲100，但實際矩形寬度爲50矩形寬度的大小將不會增加，並將邊框設置在矩形內 –

您的意思是？改變填充顏色會更簡單。

其他方法將創建一個clipPath或使用剪輯的CSS屬性。

// 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"> 
 
    <svg width="40" height="40"> 
 
     <rect id='ch' width="40" height="40" style="fill:rgb(0,0,255)" /> 
 
    </svg> 
 
</svg>

來源

2015-05-22 10:58:18

如何設置svg中的確切寬度

回答

相關問題