删除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图形的底部间距

回答

相关问题