Question

我有一个带预设视口的svg框。我想显示它以使其达到100％。但正在发生的是它正在增加下面的空间。我怎么能摆脱这个？我宁愿不必修改视口和内部组件大小（它们是从需要这些的其他工具生成的）但我可以添加/修改svg标签的属性（例如宽高比）。我做了一个小提琴 - http://jsfiddle.net/cyberwombat/2MLwx/1/ - 我希望黑色框周围的红色边框是2px。我尝试了一些preserveAspectRatio的变种，但到目前为止还没有运气。

<!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>

Answer 1

使用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为框架和框架设置必要的尺寸。像你建议的容器。我原本以为你需要动态改变尺寸

删除100％宽度SVG图形上的底部间距

1 个答案: