I have an SVG file that has, say, 10 g elements that do not start at (0,0). For example:
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="528px" height="240px" viewBox="0 0 528 240" enable-background="new 0 0 528 240" xml:space="preserve"> <g id="CONTAINER"> <g id="collapse-top"> <path id="collapse_x5F_top" fill="#1D1D1B" d="M498,206v-3c0-2.2-1.8-4-4-4h-3c-2.2,0-4,1.8-4,4v3c0,2.156,1.781,4,4,4 c0,0,2,0,3,0C496.172,210,498,208.156,498,206z M496,207c0,0.55-0.45,1-1,1h-5c-0.55,0-1-0.45-1-1v-5c0-0.55,0.45-1,1-1h5 c0.55,0,1,0.45,1,1V207z M495,206h-5l2.5-3.333L495,206z"/> </g> </g>
How can I split it into 10 different SVG files, one per g element, that each start at (0,0)?
I prefer an automated, command-line based approach to do this, but I can use Adobe Illustrator as well.
Answer
There are a couple ways I can think of to do this:
Option 1: Modify the d
attribute on the Object
Difficulty rating: ★★★★☆
Conceptually, this is pretty simple. The nitty gritty details are the issue. in the <path>
object within the <g>
, you have the d
attribute. This is the main thing you need to modify. What you’ll need to do is decode that and translate it to the updated coordinates.
Option 2: Add a transform Attribute to the Object
Difficulty rating: ★★☆☆☆
If you have a good grasp with JavaScript, this is pretty easy. You can get the bounding box of the graphic using getBBox(). You can then use that rect to add a transform attribute to the object, like so:
transform = "translate(-100 -100)"
This would move the object 100 units to the left and 100 units up. Using the example you provided, I added the following script:
<script type="application/ecmascript"> <![CDATA[
var path = document.getElementById("collapse_x5F_top");
var x = path.getBBox().x;
var y = path.getBBox().y;
path.setAttribute("transform", "translate(-" + x + " -" + y + ")");
]]> </script>
This moves the graphic to the top right corner of the screen.
Live Demo (The red icon is the original, the black is the transformed object)
**Please note that while this code works for this example, it is not robust code that will work for every test case (for instance, if values of x and y are not initially positive)
Attribution
Source : Link , Question Author : TheFooProgrammer , Answer Author : JohnB