0

我有一个带有预设视口的 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>
4

1 回答 1

0

使用 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

演示在这里

如果你的 viewbox 没有从你开始，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-06T22:31:05.603 回答