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.
Related
I am attempting to draw the path of a graph so that the path is transparent and the rest of the canvas is not. This way I can use the canvas as a mask and fill the path with different colors using html elements. Kind of like this:
There's no way to achieve this natively through Raphael, but it could be accomplished by some selective modification of the SVG produced by Raphael. Consider the use of a mask applied to the path. This technique is used to absolutely delicious visual effect here.
Don't forget that you can access the DOM node associated with a Raphael paper object through that paper object's canvas property (I don't know why Baranovskiy chose such a misleading name!). You could use this to interact directly with the SVG in the DOM, though I can't vouch for interactions between Raphael and custom modifications =)
To fill only the outer part of a path, you will have to draw what is often called a "donut" made of two path strings.
You will find a good example here : How to achieve 'donut holes' with paths in Raphael .
The idea is:
* give the outer path string as a large counter clockwise closed rectangle, telling the browser that what has to be filled is what is inside
* concat the inner path string as the clockwise closed path you want, telling the browser what has to be filled is what is outside.
Thus resulting in a filled shape with a hole which is the intersection of both filled shapes.
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.
How can I use clip-path with Raphaël.js like this example. It seams that Raphael.js has only clip-rect in it.
You can cut a hole through a path drawn shape.
This is a technique known as donut holes and you can see an example on my index page
If this looks difficult it is not
See the information database and the technique labelled donut holes
My site index is
http://www.irunmywebsite.com/
Err it used to be.
Now you can find a multiple clip path (Imagine seeing a view through several holes}
The carousel and the thumbnail holder are just one path...
See the Raphael Crousel
A much better example I include below. The central blue region has several holes cut into it. This has multi purpose usage.
It is part of what I call a DOM / SVG hybrid solution.
Cut multi purpose holes for a variety of reasons
I don't think you can do it via Raphael. You can do it by manipulating the DOM directly, but you will loose the ability to call Raphael methods for that element.
I find Raphael a bit obsolete, now that IE supports SVG. You can do much more with plain javascript and and the SVG specification.
If, like in the example image, it's a raster image (png, gif, jpg... bitmap pixel images) you are trying to clip, it's actually really easy. In Raphael 2, you just set the fill to point at the image file. It uses it as a background image.
If you want to crop an image or photograph with a Raphael path or shape like a clipping mask or clip-path for image files, just set the image as the path's fill.
somepath.attr({fill: 'someimage.png'});
Limitations (AFAIK):
Only one image per path
Only one path per image (use compound paths for complex masks)
Things like background position aren't easy - see this question for more
I think it's impossible to stop the image repeating
I have read through quite a few past answers to this comparison question. But did not find a satisfying answer to my particular situation.
I want to make a note taking application using either SVG or Canvas. But find it hard to decide between SVG or Canvas.
The note taking app should be simple (only drawing/writing + erasing) capability.
I guess both SVG and canvas can work. But is it true that Canvas is going to be easier to program than SVG for this particular task?
THanks
Canvas will be easier since you mention erasing. Because canvas is bitmap graphics, to erase something you simply clear the specific pixels you want to get rid of.
To do the same in SVG, you would need to either clear entire shapes or determine how to modify the shapes to erase only parts of them - or add new shapes on top using white or whatever is the background color.
This article has a good overview of the differences and why you might choose one over the other: http://blogs.msdn.com/b/ie/archive/2011/04/22/thoughts-on-when-to-use-canvas-and-svg.aspx
basically canvas is pixel based whereas SVG is object based.
If you need to know which shape you clicked on afterwards it's easier in SVG.
If you just want to draw stuff as fast as possible then canvas may be your best bet.
I do not know what really is "note taking app" but take a look at this svg edit
Is there a way to draw an arc using points in JavaScript??
I need to draw an arc when I specify a group of points.
Depending on what platforms you want to support and on the complexity of the drawing, I'd suggest either DHTML, canvas (with ExplorerCanvas for IE).
Although DHTML is cross-browser, canvas seems the way to go for future projects since it is capable of much more and is actually meant to be used for graphics.
Edit: Either I was wrong when I originally wrote this or ExplorerCanvas was actually using flash to render its canvas. but now they've seemed to switch to VML and/or Silverlight. I've edited my answer to exclude that variable dependency. I've also added a stronger suggestion towards canvas.