Develop Reference

Convert Leaflet CircleMarker Object to SVG (Path)

I want to get the HTML/SVG path-element of a circleMarker-object with Leaflet. Meaning I want the SVG that Leaflet renders when I create a circleMarker on a map.
So for example
L.circleMarker([5,5])
to
<svg>
<g>
<path class="leaflet-interactive" stroke="#f9e231" stroke-opacity="1" stroke-
width="3" stroke-linecap="round" stroke-linejoin="round" fill="#f7ba00" fill-opacity="1"
fill-rule="evenodd" d="M621,139a7,7 0 1,0 14,0 a7,7 0 1,0 -14,0 ">
</path>
</g>
</svg>
Is there a method or function in leaflet that can do this?

Removing gap between two SVG paths without removing anti-aliasing

I have two SVG paths that have a gap between them.
From reading through other questions (in particular this one) I understand this is because of the native anti-aliasing properties of SVGs.
So I added shapeRendering="crispEdges"
This does remove the gap. However it results in jagged edges because of the removal of anti-aliasing.
<svg height="300" width="300" shapeRendering="crispEdges">
<path
d="M150 10 a120 120 0 0 1 103.9230 60"
fill="none"
stroke="green"
stroke-width="20"
/>
<path
d="M253.9230 70 a120 120 0 0 1 0 120"
fill="none"
stroke="green"
stroke-width="20"
/>
</svg>
I've also tried the suggestion in this question to add crispEdges to the parent svg of the path and add shapeRendering="optimizeQuality" to the path but that didn't work.
How can I remove the gap AND keep the smooth edges of my svg path?

You could also mitigate this gap rendering effect by applying a subtle svg feMorphology dilate filter – resulting in slightly expanded strokes closing thin gaps between paths:
SVG feMorphology filter
svg {
overflow: visible;
}
.chart path {
filter: url(#outline);
}
path:hover {
stroke: red;
}
<svg height="300" width="300" shape-rendering="geometricPrecision">
<g class="original">
<path d="M150 10 a120 120 0 0 1 103.9230 60" fill="none" stroke="green" stroke-width="20" />
<path d="M253.9230 70 a120 120 0 0 1 0 120" fill="none" stroke="green" stroke-width="20" />
</g>
<text x="50%" y="50%">Original</text>
</svg>
<svg height="300" width="300">
<filter filterUnits="userSpaceOnUse" id="outline" >
<feMorphology in="SourceGraphic" result="DILATED" operator="dilate" radius="0.5" />
</filter>
<g class="chart">
<path d="M150 10 a120 120 0 0 1 103.9230 60" fill="none" stroke="green" stroke-width="20" />
<path d="M253.9230 70 a120 120 0 0 1 0 120" fill="none" stroke="green" stroke-width="20" />
</g>
<text x="50%" y="50%">Dilate filter</text>
</svg>
But this approach will also introduce slightly rounded edges (you can see this effect on hover).
More importantly, svg filters are quite expensive with regards to rendering performance – rather negligible if you only display a few elements per page view.
Add concatenated background path
As suggested by #Robert Longson: you could also prepend a background path based on concatenated d path data.
This task could be achieved with a javaScript helper method cloning the first path and displaying the concatenated paths.
addBgPaths(".addBGPath");
function addBgPaths(selector) {
let addPathSvgs = document.querySelectorAll(selector);
addPathSvgs.forEach(function(svg) {
let paths = document.querySelectorAll(".addBGPath path");
let firstPath = paths[0];
let firstPathCloned = firstPath.cloneNode();
//cloned elements shouldn't have ids to avoid non unique ids
firstPathCloned.removeAttribute("id");
let dArr = [firstPath.getAttribute("d")];
for (let i = 1; i < paths.length; i++) {
let path = paths[i];
let d = path.getAttribute("d");
dArr.push(d);
}
firstPathCloned.setAttribute("d", dArr.join(" "));
svg.insertBefore(firstPathCloned, svg.children[0]);
});
}
<svg height="300" width="300" shape-rendering="geometricPrecision">
<path d="M150 10 a120 120 0 0 1 103.9230 60" fill="none" stroke="green" stroke-width="20" />
<path d="M253.9230 70 a120 120 0 0 1 0 120" fill="none" stroke="green" stroke-width="20" />
<text x="0" y="50%">Original</text>
</svg>
<svg class="addBGPath" height="300" width="300" shape-rendering="geometricPrecision">
<path id="first2" d="M150 10 a120 120 0 0 1 103.9230 60" fill="none" stroke="green" stroke-width="20" />
<path d="M253.9230 70 a120 120 0 0 1 0 120" fill="none" stroke="green" stroke-width="20" />
<text x="0" y="50%">Add bg path</text>
</svg>
<svg class="addBGPath" height="300" width="300" shape-rendering="geometricPrecision">
<path id="first" d="M150 10 a120 120 0 0 1 103.9230 60" fill="none" stroke="green" stroke-width="20" />
<path d="M253.9230 70 a120 120 0 0 1 0 120" fill="none" stroke="red" stroke-width="20" />
<text x="0" y="50%">Add bg path (red)</text>
</svg>
<svg height="300" width="300" shape-rendering="geometricPrecision">
<path d="M150 10 a120 120 0 0 1 103.9230 60" fill="none" stroke="green" stroke-width="20" />
<path d="M253.9230 70 a120 120 0 0 1 0 120" fill="none" stroke="red" stroke-width="20" />
<text x="0" y="50%">Original (red)</text>
</svg>
If all your path segments have the same color, this is probably the most elegant solution.
But this approach will also introduce colored "halos" when segments use different stroke colors (example #3 compared to #4).

If you able to edit the svg in editor, you can overlap like this. The darker green is the intersection between two paths.

As a quick fix, you can make the ends overlap with stroke-linecap="square"
But ideally, you need to create a single path instead of two separate paths.
<svg height="300" width="300" shapeRendering="crispEdges">
<path
d="M150 10 a120 120 0 0 1 103.9230 60"
fill="none"
stroke="green"
stroke-width="20"
stroke-linecap="square"
/>
<path
d="M253.9230 70 a120 120 0 0 1 0 120"
fill="none"
stroke="green"
stroke-width="20"
stroke-linecap="square"
/>
</svg>

Cannot add event listener to nested SVG element

I'm having trouble adding and firing an event listener with javascript on this svg element. Js is at the bottom of the code block. I can set the target ID to a variable no problem. It's attaching an event listener and doing "something" on click/hover that seems to be the issue. The end goal is to show the box when hovering over the dot by adjusting the opacity.
var dot15 = document.getElementById('Dot_15');
var box15 = document.getElementById('Info_Box_15');
dot15.addEventListener('mouseover', function() {
box15.style.opacity = "1";
});
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="777.6px" height="491px" viewBox="607.3 235.5 777.6 491" style="enable-background:new 607.3 235.5 777.6 491;" xml:space="preserve">
<style type="text/css">
.st0{fill:#00A76F;}
.st1{fill:#FFFFFF;}
.st2{font-family:'BarlowCondensed-SemiBold';}
.st3{font-size:14px;}
.st4{font-family:'BarlowCondensed-Medium';}
.st5{font-size:12px;}
.st6{opacity:0.15;fill:#454544;}
#Info_Box_15 {opacity:0}
</style>
<g id="Info_Box_15">
<polygon class="st0" points="1156.7,556.4 1149,548.4 1073,548.4 1073,501.4 1156.7,501.4 "/>
<text transform="matrix(1 0 0 1 1076.6688 516.0011)"><tspan x="0" y="0" class="st1 st2 st3">Gasden</tspan><tspan x="0" y="14" class="st1 st4 st5">Gasden, Alabama</tspan><tspan x="0" y="28" class="st1 st4 st5">89,000 sq. ft.</tspan>
</text>
</g>
<g id="Dot_15" transform="translate(608.399428608477,176.3959312419786)" cursor="pointer">
<path class="st0" d="M548.3,389.1L548.3,389.1c1.9,0,3.5-1.5,3.5-3.5v0c0-1.9-1.5-3.5-3.5-3.5h0c-1.9,0-3.5,1.5-3.5,3.5v0
C544.9,387.5,546.4,389.1,548.3,389.1z"/>
</g>
<g id="Site_x5F_3_x5F_Blue_x5F_Valley">
<g id="Info_box_3">
<polygon class="st0" points="1018.2,467.3 1010.5,459.4 934.5,459.4 934.5,412.3 1018.2,412.3 "/>
<text transform="matrix(1 0 0 1 938.1677 426.9739)"><tspan x="0" y="0" class="st1 st2 st3">BLUE VALLEY</tspan><tspan x="0" y="14" class="st1 st4 st5">Kansas City, KS</tspan><tspan x="0" y="28" class="st1 st4 st5">83,224 sq. ft.</tspan></text>
</g>
<g id="Dot_3" transform="translate(608.399428608477,176.3959312419786)">
<path class="st0" d="M409.8,300L409.8,300c1.9,0,3.5-1.5,3.5-3.5v0c0-1.9-1.5-3.5-3.5-3.5h0c-1.9,0-3.5,1.5-3.5,3.5v0
C406.4,298.5,407.9,300,409.8,300z"/>
</g>
</g>

SVG custom circles shape

I don't have experience with SVG and I have a problem with creating my custom shape. I want to create below shape.
Share of slices and belongings lines should be genarated dynamically.
All slices are the same. For example: If we have 4 slices each slices would have 25% value, if there are 10 slices we would have 10 slices with 10%.
<!DOCTYPE html>
<html>
<body>
<svg width="800" height="800">
<circle cx="400" cy="400" r="300" stroke="black" stroke-width="2" fill="red" />
<circle cx="400" cy="400" r="80" stroke="black" stroke-width="2" fill="blue" />
<path d="M 400 400 H 480 320" stroke="black" stroke-width="2" fill="none" />Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Please, help me out.

You will need multiple elements to this SVG.
Two for the center circle
Four for the outer circle
First, you need 4 areas for the 4 sections in the outside circle. This can be done like so:
<svg width="50%" viewbox="0 0 100 100">
<path d="M50,50 L0,50 A50,50 0 0,1 50,0" fill="red"></path>
<path d="M50,50 L100,50 A50,50 0 0,1 0,50" fill="blue"></path>
<path d="M50,50 L100,50 A50,50 0 0,1 50,100" fill="green"></path>
<path d="M50,50 L50,0 A50,50 0 0,1 100,50" fill="yellow"></path>
</svg>
For the inside area, you will need two segments with text inside.
text {
fill: white;
font-size: 16px;
}
<svg width="50%" viewbo0x="0 0 100 100">
<path d="M0,50 A50,50 0 0,1 100,50z" fill="purple"></path>
<path d="M0,50 A-50,-50 0 1,0 100,50z" fill="green"></path>
<text x="18" y="40">Some text</text>
<text x="15" y="70">Bottom text</text>
</svg>
Join them together and hey presto, you should have your shape.
text {
font-size: 2.5em;
fill: white;
}
<svg width="50%" viewbox="0 0 1000 1000">
<path d="M500,500 L0,500 A500,500 0 0,1 500,0" fill="red"></path>
<path d="M500,500 L1000,500 A500,500 0 0,1 0,500" fill="blue"></path>
<path d="M500,500 L1000,500 A500,500 0 0,1 500,1000" fill="green"></path>
<path d="M500,500 L500,0 A500,500 0 0,1 1000,500" fill="yellow"></path>
<path d="M350,500 A100,100 0 0,1 650,500z" fill="purple" x="45" y="45"></path>
<path d="M350,500 A-100,-100 0 1,0 650,500z" fill="pink"></path>
<text x="420" y="450">Some text</text>
<text x="410" y="550">Bottom text</text>
</svg>
SVG Documentation (MDN)

Make rounded cornered rectangle into speech bubble and position mage relative both in svg

I am trying to make an SVG rectangle into a speech bubble, something like the following - http://jsfiddle.net/ThinkingStiff/mek5Z/ but using SVG rather than CSS
The SVG HTML looks like this (I am actually using Extjs, and this is the HTML output of the SVG draw component);
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="45" id="ext-gen1408" style="width: 300px; height: 45px;">
<defs></defs>
<rect width="100%" height="100%" fill="#000" stroke="none" opacity="0" id="ext-gen1409"></rect>
<rect id="ext-sprite-1404" zIndex="0" width="100%" height="100%" stroke="#eb5439" fill="#fbcbc1" x="0" y="0" r="10" stroke-width="1" ry="10" rx="10" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect>
<text id="ext-sprite-1405" zIndex="0" text="Sample text" fill="#ce2700" font="14px" x="10" y="15" text-anchor="start" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><tspan x="10" dy="3.625">Sample text</tspan></text>
<image id="ext-sprite-1406" xlink:href="images/cross.png" zIndex="0" src="images/20110215-feat-html5.png" width="24" height="24" x="265" y="5" preserveAspectRatio="none" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image>
</svg>
How would I go about adding the arrow, either at the bottom or to the left e.t.c? Also, is there a way to make so that the image is placed relative to the top and right edges of the rectangle, so that when it is resized the image position remains at the same distance from the edges. or if relative positioning is not possible, how do I go about achieving the desired effect.

How about something like this:
<svg width="100%" height="1000">
<defs>
<filter id="shadow">
<feGaussianBlur in='SourceAlpha' stdDeviation='2.5' result='blur' />
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .35 0" result="blur"/>
<feMerge>
<feMergeNode in='blur'/>
<feMergeNode in='SourceGraphic'/>
</feMerge>
</filter>
</defs>
<g transform="translate(30,5)">
<g fill="#f2f2f2" filter="url(#shadow)">
<rect width="107" height="40" rx="5" ry="5"/>
<path d="M -20 20 l 21 -10 0 20 z"/>
</g>
<text x="53" y="25" text-anchor="middle">Hello there!</text>
</g>
</svg>
Demo here