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?
Related
How can I place a complex SVG image (with css-styles!) geo-referenced over an openlayers map so that the document's CSS styles are used with rendering the SVG.
A regular ImageLayer does a fine job of showing the georeferenced svg on the map as an image. But because it is an image, the CSS of the document has no effect on the rendered SVG
The SVG Layer example on the other hand places the SVG into the DOM and makes it react to the document's CSS and reacts when you change the CSS. But it always maps the SVG over the whole planet and seems to hide any layer I place under it.
To give you an idea of the use case: we have an externally generated SVG with several 'groups or layers' in it representing different aspects of infrastructure. This svg has to be put correctly over a map (like we can do with the imagelayer), but we want to be able to selectively show/hide the different 'groups or layers' that are within the SVG.
I guess in the end we would be needing something similar to ol/layer/Image/ImageLayer to happen in the SVG-layer example.
Any suggestions about how to approach this would be very welcome, but working code is also OK ;-)
In the example the image width is 360 degrees and the center is at [0, 0]. For a smaller extent you would need to use the appropriate width and adjust the center used in the transform https://codesandbox.io/s/lucid-poitras-i1qyb?file=/main.js Use an opacity setting to avoid completely hiding the base layer.
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)
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.
I've got a collection of SVG's that were generated by taking a corresponding collection of PNG's, live-tracing them all in Adobe Bridge, saving them as AI, and converting those AI files to SVG's using Adobe's builtin scripts.
The shapes in the SVG's turned out fine -- however, somewhere in the process a bunch of extra padding was added to the sides of the images. To be more precise, the height and width properties of the itself as well as the dimensions of the viewBox are much larger than the shapes they contain.
Are there any solutions (ranging from string substitution in the .svg's to fancy Adobe scripts) to automatically set the dimensions of the viewBox fit only the shapes, or otherwise crop the SVG to achieve the same effect?
I'm new to SVG, so let me know if there's additional information that could be helpful.
Thanks
In XAML there is the concept of a [Border] object that behaves much like an SVG rectangle except that a XAML [Border] can contain a child element.
So I could create a [Border] with a black stroke and inside it have another border that had a white stroke and a fill of Green.
This gives the the look of a single rectangle with both a black border & then an inner white border.
How can you create this in SVG?
You need multiple paths. In this particular case you could 'cheat' by having the same path twice, with the lower path having a larger border that appears 'outside' the upper object; in general, though you will need to create paths with offsets if you want this behavior.