Geek asks and answers

Divide groups in SVG into sub-images located around the content

I was having problems with individual elements with imported SVG and was hoping for some advice.

I have an SVG created in Illustrator, with several layers that are ultimately elements of a group. When I retrieve SVG from my server, I get something similar.

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

I do not want to place the image as one, so I break it into groups and surround them with my own svg tag, and then place it on the page.

<svg>
  <g>
</svg>

<svg>
  <g>
</svg>

It's great, it works the way I want.

My problem is that the paths of each of these elements are drawn in the source file. They are all drawn (0,0) from the Illustrator file, so when I try to place them, they all have a ton of white space on the left where other elements previously existed.

transform = "translate (-50, -50)" - , , x, y , , .

- ? SVG ?

firebug chrome , - , Illustrator.

contentDocument, documentElement, null. , ?

ActionScript Javascript jQuery, x, y , , :/

+3
1

XY , , - . ( pathSegList DOM, raw string) 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(' ')
);

, transform , . ( .) , , .

: 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;
}
+4

More articles:


All Articles