In vector editors, it is possible to fill a segment with color. This creates an additional svg element. Is it possible to implement this on javascript? I am interested in a ready-made solution like a library or method, or an algorithm, how to achieve this.
In search of a solution, I found libraries for finding intersections of paths, but this is not what I need. Svg can be of any shape. What I can control: there will be only path.
Related
Basically I'm wondering if anyone has any ideas on how to efficiently get a long shadow effect with an SVG:
My three ideas on how this might be possible:
Hella detailed gradient map, but is there a web-compliant way to export that to SVG from Illustrator?
Blend Object SVG Filter that I'm not aware of?
JS solution with something like SNAP SVG?
My temporary solution was to export each puzzle piece from Illustrator with 75 layers of SVG paths making the shadow (similar to long shadow with text shadow here: http://creative-punch.net/2014/03/long-shadow-buttons-css3-sass/). The problem with so many layers, is that it really burdens browser rendering. Here's an Example
I've already employed the use element, but calling a symbol element with all 75 shadow paths.
In the original AI file, the effect is created using the blend mode, which, after some googling, I couldn't find an SVG filter equivalent to...but perhaps I'm missing something.
I was trying to figure on how to do it with a single path and gradient, but because of the "layered effect", it wouldn't be linear, so Id have to really map the hell out of it and didnt know if there's an easy way to do that.
Thanks for your help!
<code>for some reason I need this in order to link to codepen. Ignore</code>
There is no way to do this in SVG without drawing a shadow per pixel of length in the shadow, or by just drawing the shadow directly. For the first case, you can do this using multiple offset shapes with decreasing fill opacities, or with a filter that layers in multiple drop shadows.
(Photoshop has an extrusion control that automates this for you.)
Is there a way to convert a stroked path to a shape using javascript? Do any libraries offer this as a build in feature?
I know Illustrator has this function, so a possible solution would be to copy the SVG image on the screen and move it to Illustrator, but if you could do that, would you lose all the associated meta-data stored as attributes?
[I]s there a way to convert a stroked path to a shape using JavaScript?
Yes, there's a way to convert an SVG path stroke into an outlined shape. Unfortunately, it is not a prepackaged function built into SVG. The way to do it is called Math. You'd need to account for bézier curves, miter settings, linecaps, linejoins, and dasharrays. As #inhan noted you might use various functions to help you or to approximate it, but none of them are going to do the math for you. It is possible, but it is not by any means easy…in JavaScript.
[W]ould there be a way to copy the svg image on the screen and move it to Illustrator?
Sure, that's easy.
Open your D3.js SVG-based illustration in a web browser.
Open the Developer Tools (or Firebug).
Find the element you want, right-click and choose "Copy as HTML" or "Copy SVG".
Paste the code into a text editor and wrap it with SVG.
Open the SVG in Illustrator.
Outline the path(s) you want.
Save as SVG
Copy/paste the SVG code Illustrator exported into…wherever you want.
But what does this gain you? Certainly nothing that works with your D3.js visualization.
But if you could do that, would you lose all the associated meta-data stored as attributes?
What are you talking about? If you are talking about attributes in the source code, then you only lose it if you don't copy/paste the attributes onto the result. If you are talking about JavaScript data bound to a visualization running in the web browser, of course you are going to lose the data if you round trip through Adobe Illustrator.
Your questions make so little sense to me that I have a feeling that I must be missing what your needs/goals are. What are you really trying to accomplish?
Using Element.getTotalLength() and Element.getSubpath() functions in Raphaël along with stoke-width and stroke-dasharray attributes of that path in a function would probably give the result.
I am creating a vector layer comprised of polygons from a KML file using Openlayers and I need to apply a "hash" pattern (diagonal striping) to the polygons. I know Openlayers doesn't natively support adding a background image to a polygon in a vector layer but I'm wondering if anyone has any ideas on how to accomplish this? The styling of a vector polygon appears to be limited to solid colors and opacity. If need be I'll extend OpenLayers to add this functionality in by manually drawing the hash lines within the polygon boundaries but I'm hoping someone has a simpler suggestion before I head down that road.
Using SLD this can now be done. Not sure if it's in version 2.11 or the trunk development but i saw the addition was committed about 6 months ago.
It uses an ExternalGraphic so you can set an image of whatever pattern or color you want.
Here's the Example
I have not try this yet, but I have similar problem.
The solution I will try is svg pattern.
OpenLayers has SVG.js which is used to draw polygons. I will modify that to support patterns.
Look Image -->
http://i2.aijaa.com/b/00653/9707550.jpg
In this example i have modified http://openlayers.org/dev/examples/behavior-fixed-http-gml.html example to demonstrate pattern usage. --> Could this be good solution?
I need the ability to efficiently draw a large number of interactive curves (possibly Bezier) in a web app. Imagine a graph-like structure with many draggable elements that are connected with smooth curves. Hence, the curves must adjust in shape and length as single elements are moved.
What graphic method will be best to assure efficiency and interactivity for a large number curves?
SVG? Canvas? something else?
(And once we know which method is best, is there a good library that would make it easier to implement?)
You might take a look at JSXGraph. I haven't personally used it, but know some who has with nice results. It looks like it will use 'SVG, VML or canvas'.
In SVG it is possible to define a pattern that can be used as the fill for a path. For an example of what I mean you can check this link: SVG pattern example. Unfortunately SVG is not usable in older versions of Internet Explorer, so I'll have to work with VML there.
To make my life a little more easy I use Raphaël JS (to be more specific, I use the draw package of ExtJS 4.0, which is based on Raphaël), so I don't have to worry about the differences between SVG and VML.
Raphael JS however, does not provide a way to define patterns and use them, so I'll have to do this by hand. In SVG this is not much of a problem, but in VML I cannot find a way to create a pattern and use it as the (repeating) background of a path.
The closest thing I have found is the ability to use an image as the background of a path, as described here on MSDN. The problem is I want to fill the path with a repeating vector image, so I can scale it and still have it look nice.
Any help in pointing me in the right direction for solving this would be greatly appreciated.
Edit: For people visiting my post: I've come to the conclusion that what I describe above is not possible. The only patterning possible in VML is tiling an image, using a fill element. Patterns made of vector shapes are not possible in VML.
I'm using this method:
1- Create a bounding box with path element (not rect) of the path you want to fill.
2- Append "z" and the path string of the path you want to fill to the bounding box path string. This will create a clipped rect.
3- Use javascript for repeating pattern behind the clipped rect.