I have been searching and was curious if any of you smart guys know how I can join two polylines into one polyline. I could simply create another polyline but would like to join them and I haven't found a polyline command that is like the Move to command in Paths.
I don't think there is something like that, maybe there are some ways to do that, but I don't think you can join two separate Polylines with some command. Maybe I'm wrong but I think that the easiest way is to join their points into one polyline tag.
Here is example
Separated polylines:
<svg>
<polyline points="0 0,100 0" style="stroke: black; stroke-width: 3; fill:none;"/>
<polyline points="100 10,100 100" style="stroke: black; stroke-width: 3;fill:none;"/>
</svg>
Мerged polylines:
<svg>
<polyline points="0 0,100 0 100 10,100 100" style="stroke:black; stroke-width:3;fill:none;"/>
</svg>
If you are looking to alter the inherent geometry of the lines the only solution is to use something that is called ''Boolean Operations''.
Boolean operations cannot be performed on lines, only on closed shapes that have an area. So if you actually have a rectangle that is lets say 300 x 1 in size it looks like a line and is available to be boolean-operated on.
There is a nice library I've used before called Javascript Clipper or Clipper in C++
In case this is a one time thing you need just use Inkscape or Illustrator (pathfinder window)
Related
I have a number of SVG images being inserted into a PDF file using TCPDF. For example:
<path d="M0 100 L 80 100 L 40 27 L 0 100" stroke="black" fill="transparent" stroke-width="5" />
The problem is that TCPDF seems to turn any transparency to grey. How can I make it transparent? I cannot simply turn it to white as it is being placed on top of other data as well.
Many of the shapes are complex, utilizing bezier curves and stroke arrays so I need to use a path rather than lines, polygons, or polylines.
I think this might not be possible, but I have found a workaround. Rather than setting
fill="transparent"
I just use:
fill="none"
or
fill-opacity="0"
This seems to work fine. Both can be found on this page:
How to make an SVG element transparent (using SVGweb)
Let's consider the simple following image in its SVG representation (running the code snippet will display it):
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="200" width="200">
<g>
<path d="m 90.200184,21.865233 13.886726,0 0,91.406257 q 0,8.4375 -4.306646,11.86524 -3.7793,2.72461 -13.35938,2.72461 -10.37109,0 -18.19336,-1.05469 l -2.46094,-13.53516 q 11.07422,2.02148 18.45704,2.02148 5.97656,0 5.97656,-5.97656 l 0,-87.451177 z"/>
</g>
</svg>
The SVG path is actually a collection of points all around the shape, while it could be a simple top-down slanted curve (the red line here). Unfortunately, I am provided these images, and cannot change them.
I am looking for a way to convert—or rather approximate—the SVG polygon to an SVG open curve., either directly or in several steps.
Any solution is welcome, but my preference goes to this order:
programmatically (so that I can script it);
using Inkscape or GIMP (or any other Linux program);
well, anything that would work.
Thanks,
Isn't it as simple as deleting the closing z from the path?
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="200" width="200">
<g>
<path d="m 90.200184,21.865233 13.886726,0 0,91.406257 q 0,8.4375 -4.306646,11.86524 -3.7793,2.72461 -13.35938,2.72461 -10.37109,0 -18.19336,-1.05469 l -2.46094,-13.53516 q 11.07422,2.02148 18.45704,2.02148 5.97656,0 5.97656,-5.97656 l 0,-87.451177"/>
</g>
</svg>
Or are you looking for something more complicated than that?
Obviously, deleting the closing z is simple to script in your programming language of choice.
This class of algorithms is generally known as finding the "skeleton" or "medial axis". If you search on those terms you will find papers and other documents describing different potential approaches. Many/most usually involve starting with bitmaps though.
https://en.wikipedia.org/wiki/Topological_skeleton
The SVG elements <line>, <circle>, <rect>, <text> and , <image> allow for positioning by x and y based off of the view port. Furthermore they can also be relatively positioned. Is there any way to accomplish this for <polygon> than to wrap it in an <svg>? The closest substitute for <polygon>, <path>, also has this... issue.
Based on the excellent comment by #Michael Mullany I was able to find a solution to the issue. By putting the polygon or path in side a <defs> tag it can be used later on in a <use> tag. The <use> tag allows for setting of x and y attributes that function the same as the attributes of other simple shapes like <line>, <circle>, <rect>, <text>
http://jsbin.com/iqEkAsE/2
<svg width="100%" height="100%">
<defs >
<path id="Triangle"
d="M 1 1 L 200 1 L 100 200 z"
fill="orange"
stroke="black"
stroke-width="3" />
</defs>
<use x="33%" y="33%" xlink:href="#Triangle"/>
<use transform="scale(-1)" x="-66%" y="-66%" xlink:href="#Triangle"/>
</svg>
It would be nice to be able to scale the shape dynamically by setting the width and height property of the <use> to a percent but it can still be scaled with a transform.
Use transformations (translation, rotation, scale), that is the correct way to do it.
The other shapes allow you to use a point defined by x,y coordinates because that's just a part of the shape definition (i.e. how do you define a circle, you need the center point and the radius).
In theory you could position an element using its bounding box, however the bounding box is not "settable" (there is no setBBox method), there is only getBBox()
I want an arc line that goes from thick to thin, kind of like figure 13 here:
Is this possible with SVG?
Not with just a stroke, no. You would have to use a fill, and offset the paths slightly to get the tapering effect.
I found a way to do it, just draw two lines with a little offset in beginning point. Just like this:
<svg viewBox="0 0 1000 400">
<path d="M 50,250 C 50,150 150,50 250,50" fill="none" stroke="green" stroke-width="11"></path>
<path d="M 60,250 C 60,150 150,50 250,50" fill="none" stroke="green" stroke-width="11"></path>
</svg>
In Inkscape, there are Triangle In and Triangle Out styles for drawing curves that look like that, and they just make a path, so I assume not.
I am using multiple differently colored rectangles to build a SVG data visualization. This works great but sometimes background color bleeds through between the rectangles. I am browsing with Chrome but other browsers seem similarly affected.
http://jsfiddle.net/dVEPk/
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="10.5" y="10" height="100" width="100"
style="stroke:none; fill: #00cc00"/>
<rect x="110.5" y="10" height="100" width="100"
style="stroke:none; fill: #00cc00"/>
</svg>
In Chrome, if the x offset is an integer, the line is not visible.
I'm sure I can avoid lines by making rectangles a little larger than the space they have to occupy. But this seems like a hack: is there an SVG idiom or best practice to achieve perfectly tiled shapes without "grout"?
I'm also concerned by rendering performance because my visualizations can be very large (say 100MB XML .svg). I'd like to be able to give the renderer hints like "none of the shapes in this <g> are overlapping"?
This is antialiasing at work between the shape and the background. If you want to turn it off set shape-rendering="crispEdges" on the shapes. You can either set that on the rect elements or on the <svg> in which case the rect elements will inherit it.
You may be able to adjust the line's positions by adding 0.5 to the co-ordinates. See the cairo FAQ for more details on this.