amCharts has a lot of free svg maps of most countries of the world, also an API for making these maps interactive: http://www.amcharts.com/svg-maps/ Disclaimer: I am the author of amCharts.
Is there any way to display an SVG image in an JavaFX application? Here are some options: Create a WebView and load the svg image into the WebView’s WebEngine. The e(fx)clipse project includes an svg to fxml converter (link now dead :(). This NetBeans plugin also converts svg to fxml (link now dead :(). You … Read more
Does this need to be a service? Here’s how I’ve approached this in the past, using free/Open Source tools: Download public-domain shape files from Natural Earth Data Use Quantum GIS to convert .shp to .geojson (one step, under “Layer > Save As…”) Now you have hi-res GeoJSON data. This is a really big file, though, … Read more
To display your svg within a canvas, you first have to convert it using a parser/renderer utility such as http://code.google.com/p/canvg/ (code adapted from: Convert SVG to image (JPEG, PNG, etc.) in the browser, not tested) // the canvg call that takes the svg xml and converts it to a canvas canvg(‘canvas’, $(“#my-svg”).html()); // the canvas … Read more
It’s trivial: You can basically take the points attribute of a polygon and turn it into a path’s d attribute by prepending M and appending z. <svg xmlns=”http://www.w3.org/2000/svg” width=”100%” height=”100%”> <polygon points=”20,20 100,20 100,100 30,110″/> <path d=”M20,20 100,20 100,100 30,110z” fill=”green” transform=”translate(100,0)”/> </svg>
Following the link in Duopixel’s comment, the problem can be solved using a mask: <svg width=”50%” height=”50%” viewbox=”0 0 985 740″ xmlns:xlink=”http://www.w3.org/1999/xlink” xmlns=”http://www.w3.org/2000/svg”> <defs> <rect id=”sa11″ x=”763.0″ y=”176.5″ width=”70.0″ height=”25.0″ rx=”50″ ry=”50″ /> <rect id=”sa12″ x=”516.0″ y=”127.5″ width=”70.0″ height=”25.0″ rx=”50″ ry=”50″ /> </defs> <mask id=”re8-clip”> <rect id=”bg” x=”0″ y=”0″ width=”100%” height=”100%” fill=”white”/> <use xlink:href=”#sa11″ fill=”Black” … Read more
…10 years later… CSS now supports conical gradients, although browser support is mixed at the time of writing this. You could apply a <clipPath /> to a <foreignObject /> whose contents use a CSS conical gradient to achieve the desired effect.
I am coming late to this party, but look what I have found at CodePen ! a[target=”_blank”]::after { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==); margin: 0 3px 0 5px; } <a class=”external” href=”https://example.org” target=”_blank”>external link</a>
Just had to save it in a text file and give it a .svg extension.
Others here have already mentioned SVGLocatable.getBBox() which is useful for grabbing the bounding box of an element in terms of its own local coordinate system. Unfortunately, as you noticed, this doesn’t take into account any of the transformations done on the element or on its parent elements. There are a couple other functions available that … Read more