Use Adobe Illustrator to create SVG Path using "move to" commands
So when you export an Adobe Illustrator file to SVG format, paths are encoded using the SVG path syntax:
http://www.w3.org/TR/SVG/paths.html
If you look at the "path data" element, it's possible to have "move to" commands embedded into a path:
http://www.w3.org/TR/SVG/paths.html#PathData
In other words, you draw a few lines in the path, pick up the pen and move it somewhere else, and continue the same path.
I have been trying to figure out how to do this in Illustrator to no avail. You can add on to an existing path but it seems you can only do this by extending the path from one of the endpoints. I don't want to do this: I want to continue the path from somewhere else.
You can get something sort of like this by grouping two disjoint paths. However when Illustrator does the svg export it just creates two <path> tags and puts them inside a <g> tag which is not what I want. If I manually edit an svg file with a text editor, adding "move to" commands, and I import them, it looks like maybe what Illustrator is doing is creating a group, but I can't tell because I don't know how to select and object and figure out if it is a group or not.
I think the only way would be to mak a compound path. Select both paths you want to use as a single path and go to Object > Compound Path > Make.
If this doesnt work then its probably not possible. This is the only way i can think of in which a non-contiguous path would even exists as far as AI sees it.
Create a file that has a path using move-to commands:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
viewBox="-25 -25 100 100">
<path d="M0,0 L50,0 M50,50 L0,50" stroke="black" />
</svg>
Open this file in Illustrator. Note that there is a single element named <Compound Path> in the Layers palette.
Choose command Object > Compound Path > Release . Now there are two paths selected.
Choose command Object > Compound Path > Make .
Save as SVG file:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.2, 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" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="612px" height="792px" viewBox="0 0 612 792"
enable-background="new 0 0 612 792" xml:space="preserve">
<path stroke="#000000" d="M128,218h306 M434,524H128"/>
</svg>
Cheer!
上一篇: ipad / iphone的动画