3

我在使用导入的 SVG 时遇到了个别元素的问题，希望能以某种方式提供建议。

我在 Illustrator 中创建了一个 SVG，有几个图层，最终成为组元素。当我从我的服务器检索 SVG 时，我得到了类似的东西。

<svg>
  <g>
  <g>
</svg>

我不想将图像作为一个放置，所以我按组将其分解，并用自己的 svg 标签围绕每个组，然后放置在页面上。

<svg>
  <g>
</svg>

<svg>
  <g>
</svg>

这太棒了，像我想要的那样工作。

我的问题在于，每个项目的路径都绘制在原始文件中。它们都是从 Illustrator 文件中提取的 (0,0)，所以当我尝试放置它们时，它们的左侧都有大量的空白区域，其他元素曾经存在的地方。

我尝试过使用 transform="translate(-50,-50)" 或其他方法，它确实会移动元素，但由于它们没有 x,y 属性，我不知道在哪里移动它们。

有谁知道抵消绘制路径的方法？或者是否有一种方法可以读取 SVG 并将其分解为每个单独的元素并使用？

使用 firebug 或 chrome 时，它​​们会向我显示具有正确尺寸的单个元素，但由于 Illustrator 中绘制的路径的位置，它们被放置有很多空白区域。

我试过了contentDocument，documentElement这两个都为空。也许我用错了？

我是一个沉重的 Actionscript 开发人员，现在使用 Javascript 和 jQuery，所以我习惯于 x,y 坐标系统和放置元素，但这似乎不是它应该工作的方式：/

4

1 回答 1

5

如果您真的想获得路径的 XY 部分，我编写了一个函数来将路径转换为使用全绝对命令。有了这个，您可以运行路径命令（使用pathSegListDOM 接口，而不是原始字符串属性）并提取所有 X/Y 值并按照您的意愿处理它们。

然而，更容易的是简单地计算路径的边界框viewBox并将元素设置为<svg>直接适合它：

// In case you want to leave the old SVG document unchanged
var newGroup = oldGroup.cloneNode(true);
var newSVG = document.createElementNS('http://www.w3.org/2000/svg','svg');
newSVG.appendChild(newGroup);

var bbox = newGroup.getBBox();
newSVG.setAttribute(
  'viewBox',
  [bbox.x,bbox.y,bbox.width,bbox.height].join(' ')
);

上面的答案没有正确解释 atransform已经应用于您要移动的组的情况。（边界框在元素的未转换空间中返回。）我创建了一个演示来解决这个问题，计算转换元素的正确边界框。

演示： http: //phrogz.net/SVG/explode_svg_components.xhtml

// Find all the root groups in the original SVG file
var rootGroups = document.querySelectorAll('svg > g');
for (var i=rootGroups.length;i--;){
  var newSVG = elementToSVG(rootGroups[i]);
  document.body.appendChild(newSVG);
}

// Create a new SVG wrapping around a copy of the element
// with the viewBox set to encompass the element exactly
function elementToSVG(el){
  var old = el.ownerSVGElement,
      svg = document.createElementNS(old.namespaceURI,'svg'),
      css = old.querySelectorAll('style,defs');

  // Preserve elements likely needed for correct appearance
  [].forEach.call(css,copyToNewSVG);

  copyToNewSVG(el);

  var bb = globalBoundingBox(el);
  svg.setAttribute('viewBox',[bb.x,bb.y,bb.width,bb.height].join(' '));
  return svg;

  function copyToNewSVG(e){
    svg.appendChild(e.cloneNode(true));
  }
}

// Calculate the bounding box of an element in global SVG space
// accounting for transforms applied to the element
function globalBoundingBox(el){
  var bb  = el.getBBox(),
      svg = el.ownerSVGElement,
      m   = el.getTransformToElement(svg);
  var pts = [
    svg.createSVGPoint(), svg.createSVGPoint(),
    svg.createSVGPoint(), svg.createSVGPoint()
  ];
  pts[0].x=bb.x;          pts[0].y=bb.y;
  pts[1].x=bb.x+bb.width; pts[1].y=bb.y;
  pts[2].x=bb.x+bb.width; pts[2].y=bb.y+bb.height;
  pts[3].x=bb.x;          pts[3].y=bb.y+bb.height;

  var xMin=Infinity,xMax=-Infinity,yMin=Infinity,yMax=-Infinity;
  pts.forEach(function(pt){
    pt = pt.matrixTransform(m);
    xMin = Math.min(xMin,pt.x);
    xMax = Math.max(xMax,pt.x);
    yMin = Math.min(yMin,pt.y);
    yMax = Math.max(yMax,pt.y);
  });

  bb = {}; //IE9 disallows mutation of the original bbox
  bb.x = xMin; bb.width  = xMax-xMin;
  bb.y = yMin; bb.height = yMax-yMin;
  return bb;
}
于 2012-05-16T16:09:58.307 回答