First of all see this example.
http://radykal.de/fabric/
I would like detect when the text is moving over the blue outline of the svg shape. The black shape is a SVG, which I am loading with loadSVGFromURL().
Currently I am using the isContainedWithinObject() method to detect if the text is contained within the svg shape, but its using the rectangular bounding box of the svg shape for detection.
Is it possible to detect it with the actual path of the svg image?
Thank you.
Related
I have a map which pulls in GeoJSON polygons and points.
I represent these using the standard Leaflet methods to create SVG and html markers respectively.
To get an idea: http://i.imgur.com/GSJSZIc.jpg
SVG = blue, markers = green.
Leaflet creates 'panes', div.leaflet-overlay-pane for the SVG, and div.leaflet-marker-pane for markers. The leaflet-marker-pane (bordered in red) covers half the viewport and has a higher z-index then the leaflet-overlay-pane, thereby making the SVG polys under it unclickable.
If I set the zindex of the overlay pane to be less than the marker pane, all the markers are unclickable as the overlay pane covers the whole view port.
I've read some things in the Leaflet Github issues about createPane(), but so far haven't seen it working. Should/will this be something which fixes this problem? ie, puy all markers and SVG polys in the same pane/div.
For the time being I've set the marker pane to be 1px x 1px. This seems to work fine, leading me to ask, why would the marker pane ever be set to half the viewport size?
you have to add your svg into leaflet-marker-pane, for that just use option 'pane' when you add your SVG to the map
L.svgOverlay(svgOverlayElement, map.getBounds(), { pane: 'markerPane' }).addTo(map)
I am appending 30-50 SVG shapes and paths to a map. The position of these shapes and paths will change based on map zoom. I have identified two ways of adding these shapes to the map:
Create a small SVG container for each individual shape / path. Position the shapes at a set point within the container. Position the containers relative to the window using CSS. Reposition containers on zoom.
Create a single massive SVG container that holds all shapes and paths, covering the entirety of the window. Position the shapes using SVG shape coordinates. Reposition shapes on zoom, resize SVG container on zoom.
Are there any performance concerns that might favor one method over the other?
I'd like to make my SVG images interactive, with a zoom box that can be moved around by hovering or clicking the mouse in certain areas. Can this be done in a single SVG file, so that I can embed this interactive SVG image in a pdf?
You mean like this? Zoom and Pan
I'm working with SVG using the Raphael library. I can apply a fill colour to an object like so:
circle.attr({fill: "#ff0000"});
And this also works (though the Raphael documentation doesn't mention it):
circle.attr({fill: "url(pattern.png)"});
I am able to use transparent PNGs as fill patterns, and transparency works as expected. The svg object is completely transparent where the fill pattern image is transparent. But what I would like to do is specify both a fill pattern image and a fill colour, so that the colour would show through where the pattern image is transparent - similar to the 'background' property using CSS, for example. Is this possible with SVG?
You can define a pattern that has a rect with a fill, and an image that is your png on top of that rect. Then use the pattern as fill for the circle (or whatever element you want).
This means stepping outside of Raphaël, or extending it to do what you want. Note that what ({fill: "url(pattern.png)"}) does is to create a pattern element and and append an image element pointing to the given url. It's quite possible to hack Raphaël to allow you to pass a color too, and then you deal with that in the code that creates the pattern by creating a rect of the same dimensions as the image with the given fill color.
I should say that if you want it to work with IE<9 then you probably need to implement it in VML too.
Other options include drawing two shapes, one with color fill and the other with the raster image fill. Yet another is to make the png include the background color so that it's not transparent.
I have to build a SVG image containing some rotated text elements. I want to achieve the following:
Each text element shall be rotated around its center point by a degree.
The resulting (imaginary) bounding box of the rotated text shall be translated, so that it's upper left is at position x,y.
We don't know the content, i.e., the width, of the text elements beforehand.
What is the best way to do that?
(I have a basic understanding of SVG and I am able to look up the spec on my own. So I know about transform and rotate(), translate()... However, I struggle with this specific case.)