查找去除周围空白的svg视口

Question

假设我有一个绘制一些路径的SVG，那么我应该使用哪些工具来找到一个视口(viewbox)，以完美地适配这些路径，使得所有多余的空间都被裁剪掉？

- KwiZ

Answer 1

您可以简单地将svg的viewBox设置为其边界框。

function setViewbox(svg) {
  var bB = svg.getBBox();
  svg.setAttribute('viewBox', bB.x + ',' + bB.y + ',' + bB.width + ',' + bB.height);
  }

document.querySelector('button').addEventListener('click', function() {
  setViewbox(document.querySelector('svg'));
  });

svg {  border: 1px solid }

<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 300" enable-background="new 0 0 500 300" xml:space="preserve" width="250" height="150">
  <path fill="none" stroke="#B2E230" d="M413.7,276.5c0,0,67-37,116,0c-24.1-33,16.4-53,0-34s-100-2-75-38" transform="translate(-75,-75)" />
</svg>
<button>setViewbox</button>

注意：它还将考虑您路径中的非可见锚点。

- Kaiido

---

你的解决方法在我的示例中出了问题 http://codepen.io/KwiZ/pen/pvxdNw :) 当我手动将<g>元素包装在每个<path>周围并使用你的旧代码时，它就没问题了。 - KwiZ

@AbishekRSrikaanth 有趣的案例。我会在有更多时间时深入研究，但乍一看，我会说问题在于路径的 x 位置是负数。因此，一个快速的解决方法是在从 vB.w 中减去 vB.x（我的代码片段的第24行）时添加一些检查 if(vB.x>0)vB.w-=vB.x if(vB.y>0)vB.h-=vB.y http://jsfiddle.net/vbrnuoj2/ 但我会重新编写整个代码，因为我现在觉得它相当丑陋... - Kaiido

@AbishekRSrikaanth 我不记得为什么一开始做了这么复杂的事情，请看一下修改并告诉我是否出现了问题。 - Kaiido

@Kaiido，你能看一下这个例子吗？http://jsbin.com/mukowi/edit?html,js,output页面第一次加载时它不起作用，只有对SVG进行任何动态更改后才开始工作。有什么想法吗？它在之前的函数中也表现相同。 - Abishek

当 .ready 触发时，似乎字体尚未加载。然后 BBox 为 0 0 0 0。但是在重新加载后，字体被缓存并且一切都在 ready 函数中加载。请改用 load() 事件处理程序。 - Kaiido