刪除100％寬度SVG圖形的底部間距

我有一個帶有預設視口的svg盒子。我想要顯示它，以便它達到100％。但是，正在發生的是它正在增加下面的空間。我怎樣才能擺脫這一點？我寧願不必修改視口和內部組件大小（它們是從需要這些的其他工具生成的），但我可以添加/修改svg標記的屬性（如寬高比）。我做了一個小提琴 - http://jsfiddle.net/cyberwombat/2MLwx/1/ - 我希望紅色邊框在黑匣子周圍是2px。我已經嘗試了一些preserveAspectRatio的變體，但到目前爲止沒有運氣。刪除100％寬度SVG圖形的底部間距

<!DOCTYPE html> 
<head> 
<style> 
.frame { 
    margin:100px 100px 0 100px; 
    background-color:yellow; 
    } 
    .wrapper { 
    border:1px solid red; 
    padding:2px; 
    } 
    svg { 

    } 
    </style> 
</head> 
<body> 
    <div class="frame"> 
    <div class="wrapper"> 
     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 800 150" width="100%" version="1.1"> 
     <rect transform="matrix(1,0,0,1,0,0)" x="0" y="0" width="100%" height="100%" r="0" rx="0" ry="0" fill="#000" stroke="#000"></rect> 
     </svg> 
    </div> 
     Hello 
    </div> 

</body> 
</html>

來源

2013-08-06 cyberwombat

@Zeaklous我不試圖添加一個紅色的邊框 - 只需要顯示間距的問題。添加更多的svg路徑不會解決這個問題。 – cyberwombat

啊，謝謝你的澄清 –

海事組織這是在Chrome中的錯誤。 FF做正確的事情。 –

使用JavaScript可以改變SVG元素的尺寸視框：

var a = document.getElementsByTagName('svg')[0]; 
var width = parseInt(a.getAttribute("viewBox").split(/\s+/)[2], 10); 
var height = parseInt(a.getAttribute("viewBox").split(/\s+/)[3], 10); 

a.style.width = width + 'px'; 
a.style.height = height + 'px'; 

// You have to update the parent's dimensions too or else it has no idea its 
// child changed dimensions 
var b = document.getElementsByClassName('wrapper')[0]; 
var c = document.getElementsByClassName('frame')[0]; 
b.style.width = (width + 2) + 'px'; // Hard coded values based on your padding 
c.style.width = (width + 4) + 'px'; // Hard coded values based on your padding

Demo here

如果你的視框中沒有在0,0開始，你可以通過減去找到寬度起始值是這樣的：

var width = parseInt(a.getAttribute("viewBox").split(/\s+/)[2], 10) 
    - parseInt(a.getAttribute("viewBox").split(/\s+/)[0], 10); 
var height = parseInt(a.getAttribute("viewBox").split(/\s+/)[3], 10) 
    - parseInt(a.getAttribute("viewBox").split(/\s+/)[1], 10);

如果要包括寬度填充動態（不知道爲什麼你不得不改變填充，但是這不是我的問題），這是比較複雜的，但它會是這個樣子

var containerPadding = parseInt(window.getComputedStyle(containerVar, null).getPropertyValue('padding-left'), 10) 
+ parseInt(window.getComputedStyle(containerVar, null).getPropertyValue('padding-right'), 10);

編輯

我現在知道你不瞭解的內容：你的問題只是由於CSS。你從來沒有爲包裝或框架設置寬度/高度，所以他們嘗試使用所有的窗口減去你有的邊距。該包裝不能調整自身基礎上，SVG的高度/寬度，除非你把它從你的默認值

在這種情況下，我只是用CSS來設置必要的尺寸，框架&容器像你這樣的建議改變。我原本以爲你需要動態地改變尺寸

來源

2013-08-06 22:31:05

感謝您的所有代碼。我寧願避免修改視口（我可以根據比例設置我的包裝的高度 - 我想知道爲什麼下面有這麼多的空間。我沒有看到任何東西在我的svg中說要添加〜 300px的空格下 – cyberwombat

檢查編輯的更多信息 –

如果它只是CSS我應該能夠在svg之後有文字 - 如果它是一個塊元素就說下，但這不可能 – cyberwombat

刪除100％寬度SVG圖形的底部間距

回答

相關問題