SVG path positioning - html

I am making face SVG. Unable to set eyebrow on proper place. Please advice.
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
<ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<path d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
</svg>


You may use g element and add translation (useful if you will have more path to move at the same time):
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
<ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<g transform="translate(40,20)">
<path d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
</g>
</svg>
Or simply translation on path:
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
<ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<path transform="translate(40,20)" d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
</svg>
Here is the full SVG with both eyebrow (translation for both using g and then translate the 2nd one relatively to g). With this configuration you have to simply adjust the translation of g element if want it upper of lower
svg g {
transition: 0.5s;
}
svg:hover g {
transform: translate(10px, 15px);
}
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
<ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<g transform="translate(10,20)">
<path d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
<path transform="translate(30,0)" d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
</g>
</svg>


Use the transform attribute to position the path, like
transform="translate(50,80)"
Make sure you don't use px
Other transformations like scale or rotate are also available. See the specs.
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
<ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<path d="M16, 20 Q27, 10 35, 20" transform="translate(9, 17)" fill="none" stroke="#000" stroke-width="1.5px" />
<path d="M16, 20 Q27, 10 35, 20" transform="translate(40, 17)" fill="none" stroke="#000" stroke-width="1.5px" />
</svg>

Related

SVG renders correctly in live server but shows up as an error on html webpage

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 596.97 663.91" style="enable-background:new 0 0 596.97 663.91;" xml:space="preserve">
<style type="text/css">
#fs{
fill: black;
transition: 0.2s ease-in;
}
#fs:hover {
fill:white;
transition: 1s ease-in;
cursor: pointer;
}
.logo:hover .path {
animation: draw 1.5s forwards;
}
#keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
</style>
<g class="logo">
<polygon id="l" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="400" stroke-dashoffset="400" fill="none" points="310.71,174.24 264.83,174.24 264.83,78.12 235.86,78.12 235.86,199.58 310.71,199.58 "/>
<rect id="flip-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="350" stroke-dashoffset="350" fill="none" x="330.35" y="78.11" width="28.96" height="121.46"/>
<g>
<g>
<path id="p" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M447.88,128.3c-2.68,2.93-6.65,4.39-11.9,4.39h-17.47v-29.51h17.47c5.25,0,9.22,1.48,11.9,4.44
c2.68,2.96,4.03,6.43,4.03,10.41C451.91,121.96,450.56,125.38,447.88,128.3z M469.28,88.21c-8.21-6.73-19.31-10.09-33.3-10.09
h-46.62v121.46h29.15v-41.55h17.47c14,0,25.1-3.39,33.3-10.18c8.21-6.79,12.31-16.73,12.31-29.82
C481.59,104.88,477.49,94.94,469.28,88.21z"/>
<path id="fs" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="1050" stroke-dashoffset="1050" fill="black" d="M135.52,281.32c5.46,3.89,12.27,5.84,20.41,5.84c7.6,0,14.12-2.28,19.55-6.83
c5.43-4.56,10.17-11.48,14.21-20.77l11.86-27.97c1.57-3.56,3.02-6.23,4.35-8.01s3.14-2.67,5.43-2.67c2.48,0,4.54,1.39,6.2,4.16
c1.66,2.77,2.49,6.43,2.49,10.95c0,6.28-1.36,10.82-4.07,13.62c-2.71,2.81-6.06,4.57-10.04,5.29v28.42
c12.91-0.97,22.85-5.4,29.82-13.3c6.97-7.91,10.45-19.25,10.45-34.03c0-14.54-3.15-25.99-9.46-34.35
c-6.31-8.36-14.59-12.54-24.85-12.54c-8.75,0-15.66,2.41-20.72,7.24c-5.07,4.83-9.47,11.58-13.22,20.28l-11.49,26.43
c-1.87,4.65-3.53,7.86-4.98,9.64c-1.45,1.78-3.65,2.67-6.61,2.67c-2.42,0-4.31-0.85-5.7-2.53c-1.39-1.69-2.35-3.91-2.9-6.65
c-0.55-2.75-0.81-5.69-0.81-8.82c0-3.92,0.57-7.5,1.72-10.73c1.15-3.23,2.93-5.78,5.34-7.65c2.42-1.87,5.46-2.81,9.14-2.81
v-16.62h0.01V151.7h44.98v-24.71h-44.98v-23.8h50.23V78.11h-79.19v121.11c-3.97,3.97-7.04,8.68-9.2,14.17
c-2.92,7.42-4.39,15.47-4.39,24.16c0,10.5,1.37,19.45,4.12,26.84C125.95,271.78,130.05,277.43,135.52,281.32"/>
</g>
</g>
<rect id="side-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="800" stroke-dashoffset="800" fill="none" x="121.98" y="313.49" width="349.8" height="28.96"/>
<path id="d" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M148.41,402.19h68.42v14.03c0,6.57-1.46,12.26-4.39,17.06c-2.93,4.8-6.95,8.51-12.08,11.13
c-5.13,2.63-11.07,3.94-17.83,3.94c-6.52,0-12.34-1.31-17.47-3.94s-9.19-6.34-12.17-11.13c-2.99-4.8-4.48-10.49-4.48-17.06V402.19z
M121.98,416.22c0,12.49,2.46,23.5,7.37,33.04c4.92,9.53,11.92,17,21,22.4c9.08,5.4,19.8,8.1,32.18,8.1
c12.55,0,23.37-2.7,32.45-8.1c9.08-5.4,16.09-12.87,21.04-22.4c4.95-9.53,7.42-20.54,7.42-33.04v-42.99l-121.46,0V416.22z"/>
<polygon id="e" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="650" stroke-dashoffset="650" fill="none" points="121.98,583.57 147.32,583.57 147.32,531.34 169.86,531.34 169.86,580.31 195.02,580.31 195.02,531.34
218.37,531.34 218.37,583.57 243.44,583.57 243.44,502.38 121.98,502.38 "/>
<path id="t" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M285.06,418.85c-0.99,0.22-1.97,0.34-2.96,0.34c-3.2,0-4.81-1.69-4.81-5.07V391.5h11.14v-6.58h-11.14v-10.89h-9.96v10.89
h-5.74v6.58h5.74v22.96c0,2.87,0.6,5.23,1.79,7.09c1.2,1.86,2.8,3.24,4.81,4.14c2.01,0.9,4.23,1.35,6.65,1.35
c1.63,0,3.19-0.21,4.69-0.63c1.49-0.42,3.02-0.94,4.6-1.56l-1.43-7.01C287.17,418.29,286.04,418.62,285.06,418.85z"/>
<path id="o" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M324.71,412.56c-0.89,1.91-2.1,3.36-3.63,4.32c-1.53,0.97-3.28,1.46-5.25,1.46c-2.95,0-5.3-1.08-7.03-3.25
c-1.73-2.16-2.59-5.39-2.59-9.66c0-2.9,0.44-5.32,1.33-7.26c0.89-1.95,2.1-3.4,3.65-4.37c1.55-0.97,3.32-1.46,5.32-1.46
c2.96,0,5.28,1.1,6.98,3.29c1.7,2.19,2.56,5.46,2.56,9.79C326.04,408.27,325.6,410.65,324.71,412.56z M326.18,386.1
c-3-1.57-6.34-2.36-10.02-2.36c-3.74,0-7.12,0.79-10.15,2.36c-3.03,1.58-5.42,3.97-7.2,7.18c-1.77,3.2-2.66,7.26-2.66,12.15
c0,4.81,0.89,8.81,2.66,12c1.77,3.19,4.17,5.59,7.2,7.2c3.03,1.6,6.41,2.41,10.15,2.41c3.69,0,7.03-0.8,10.02-2.41
c3-1.6,5.38-4,7.15-7.2c1.77-3.19,2.66-7.2,2.66-12c0-4.9-0.89-8.95-2.66-12.15C331.56,390.07,329.18,387.67,326.18,386.1z"/>
<path id="u" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M375.07,404.33c0,2.98-0.48,5.48-1.45,7.49c-0.97,2.01-2.27,3.53-3.89,4.56c-1.62,1.03-3.41,1.54-5.38,1.54
c-2.31,0-4.12-0.67-5.44-2c-1.32-1.34-1.98-3.34-1.98-6.01v-25.15h-9.96v26.16c0,3.78,0.69,6.81,2.07,9.12
c1.38,2.31,3.25,3.98,5.62,5.02c2.36,1.04,5.01,1.56,7.93,1.56c2.98,0,5.61-0.82,7.89-2.45c1.87-1.34,3.39-3.27,4.6-5.73v7.42h9.96
v-41.1h-9.96V404.33z"/>
<path id="r" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M421.75,384.16c-2.5,0-4.78,0.85-6.82,2.56c-1.71,1.43-3.11,3.53-4.24,6.24v-8.2h-9.96v41.1h9.96v-17.98
c0-3.01,0.37-5.54,1.12-7.59c0.75-2.06,1.86-3.61,3.33-4.67c1.48-1.06,3.32-1.58,5.51-1.58c0.67,0,1.44,0.06,2.28,0.17
c0.84,0.11,1.63,0.25,2.36,0.42l0.17-9.96c-0.59-0.17-1.19-0.29-1.79-0.38C423.06,384.2,422.42,384.16,421.75,384.16z"/>
<path id="s" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M456.4,403.82l-9.71-3.63c-3.32-0.99-4.98-2.45-4.98-4.39c0-1.15,0.6-2.16,1.8-3.01c1.2-0.86,2.85-1.29,4.96-1.29
c2.34,0,4.08,0.39,5.23,1.18c1.16,0.79,1.8,1.86,1.94,3.21H465c-0.08-3.52-1.55-6.42-4.41-8.71c-2.86-2.29-6.9-3.44-12.13-3.44
c-5.26,0-9.46,1.07-12.6,3.19c-3.14,2.12-4.7,4.92-4.7,8.38c0,2.62,0.85,4.87,2.57,6.75c1.72,1.88,4.18,3.4,7.39,4.55l8.95,3.21 c1.83,0.56,3.16,1.17,3.99,1.84c0.83,0.66,1.25,1.57,1.25,2.72c0,0.9-0.31,1.72-0.93,2.45c-0.62,0.73-1.48,1.31-2.59,1.73
c-1.11,0.42-2.38,0.64-3.82,0.64c-2.62,0-4.69-0.47-6.2-1.39c-1.52-0.93-2.32-2.4-2.4-4.43h-9.2c0.03,2.87,0.8,5.32,2.32,7.36 c1.52,2.04,3.69,3.6,6.52,4.68s6.21,1.63,10.15,1.63c3.4,0,6.4-0.61,8.99-1.81c2.59-1.21,4.61-2.78,6.06-4.71
c1.45-1.93,2.17-3.97,2.17-6.14c0-2.59-0.87-4.73-2.62-6.42C461.99,406.27,459.55,404.89,456.4,403.82z"/></g>
</g>
</svg>
I'm trying to insert an animated logo into my website. The logo is animated correctly and after having rendered it in CodePen I thought that it was all okay but for some reason on actual websites it just shows an error. Like so:
This page contains the following errors:
error on line 75 at column 6: Opening and ending tag mismatch: svg line 0 and g
Below is a rendering of the page up to the first error.
Any ideas?
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 596.97 663.91" style="enable-background:new 0 0 596.97 663.91;" xml:space="preserve">
<style type="text/css">
#fs{
fill: black;
transition: 0.2s ease-in;
}
#fs:hover {
fill:white;
transition: 1s ease-in;
cursor: pointer;
}
.logo:hover .path {
animation: draw 1.5s forwards;
}
#keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
</style>
<g class="logo">
<polygon id="l" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="400" stroke-dashoffset="400" fill="none" points="310.71,174.24 264.83,174.24 264.83,78.12 235.86,78.12 235.86,199.58 310.71,199.58 "/>
<rect id="flip-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="350" stroke-dashoffset="350" fill="none" x="330.35" y="78.11" width="28.96" height="121.46"/>
<g>
<g>
<path id="p" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M447.88,128.3c-2.68,2.93-6.65,4.39-11.9,4.39h-17.47v-29.51h17.47c5.25,0,9.22,1.48,11.9,4.44
c2.68,2.96,4.03,6.43,4.03,10.41C451.91,121.96,450.56,125.38,447.88,128.3z M469.28,88.21c-8.21-6.73-19.31-10.09-33.3-10.09
h-46.62v121.46h29.15v-41.55h17.47c14,0,25.1-3.39,33.3-10.18c8.21-6.79,12.31-16.73,12.31-29.82
C481.59,104.88,477.49,94.94,469.28,88.21z"/>
<path id="fs" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="1050" stroke-dashoffset="1050" fill="black" d="M135.52,281.32c5.46,3.89,12.27,5.84,20.41,5.84c7.6,0,14.12-2.28,19.55-6.83
c5.43-4.56,10.17-11.48,14.21-20.77l11.86-27.97c1.57-3.56,3.02-6.23,4.35-8.01s3.14-2.67,5.43-2.67c2.48,0,4.54,1.39,6.2,4.16
c1.66,2.77,2.49,6.43,2.49,10.95c0,6.28-1.36,10.82-4.07,13.62c-2.71,2.81-6.06,4.57-10.04,5.29v28.42
c12.91-0.97,22.85-5.4,29.82-13.3c6.97-7.91,10.45-19.25,10.45-34.03c0-14.54-3.15-25.99-9.46-34.35
c-6.31-8.36-14.59-12.54-24.85-12.54c-8.75,0-15.66,2.41-20.72,7.24c-5.07,4.83-9.47,11.58-13.22,20.28l-11.49,26.43
c-1.87,4.65-3.53,7.86-4.98,9.64c-1.45,1.78-3.65,2.67-6.61,2.67c-2.42,0-4.31-0.85-5.7-2.53c-1.39-1.69-2.35-3.91-2.9-6.65
c-0.55-2.75-0.81-5.69-0.81-8.82c0-3.92,0.57-7.5,1.72-10.73c1.15-3.23,2.93-5.78,5.34-7.65c2.42-1.87,5.46-2.81,9.14-2.81
v-16.62h0.01V151.7h44.98v-24.71h-44.98v-23.8h50.23V78.11h-79.19v121.11c-3.97,3.97-7.04,8.68-9.2,14.17
c-2.92,7.42-4.39,15.47-4.39,24.16c0,10.5,1.37,19.45,4.12,26.84C125.95,271.78,130.05,277.43,135.52,281.32"/>
</g>
</g>
<rect id="side-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="800" stroke-dashoffset="800" fill="none" x="121.98" y="313.49" width="349.8" height="28.96"/>
<path id="d" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M148.41,402.19h68.42v14.03c0,6.57-1.46,12.26-4.39,17.06c-2.93,4.8-6.95,8.51-12.08,11.13
c-5.13,2.63-11.07,3.94-17.83,3.94c-6.52,0-12.34-1.31-17.47-3.94s-9.19-6.34-12.17-11.13c-2.99-4.8-4.48-10.49-4.48-17.06V402.19z
M121.98,416.22c0,12.49,2.46,23.5,7.37,33.04c4.92,9.53,11.92,17,21,22.4c9.08,5.4,19.8,8.1,32.18,8.1
c12.55,0,23.37-2.7,32.45-8.1c9.08-5.4,16.09-12.87,21.04-22.4c4.95-9.53,7.42-20.54,7.42-33.04v-42.99l-121.46,0V416.22z"/>
<polygon id="e" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="650" stroke-dashoffset="650" fill="none" points="121.98,583.57 147.32,583.57 147.32,531.34 169.86,531.34 169.86,580.31 195.02,580.31 195.02,531.34
218.37,531.34 218.37,583.57 243.44,583.57 243.44,502.38 121.98,502.38 "/>
<path id="t" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M285.06,418.85c-0.99,0.22-1.97,0.34-2.96,0.34c-3.2,0-4.81-1.69-4.81-5.07V391.5h11.14v-6.58h-11.14v-10.89h-9.96v10.89
h-5.74v6.58h5.74v22.96c0,2.87,0.6,5.23,1.79,7.09c1.2,1.86,2.8,3.24,4.81,4.14c2.01,0.9,4.23,1.35,6.65,1.35
c1.63,0,3.19-0.21,4.69-0.63c1.49-0.42,3.02-0.94,4.6-1.56l-1.43-7.01C287.17,418.29,286.04,418.62,285.06,418.85z"/>
<path id="o" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M324.71,412.56c-0.89,1.91-2.1,3.36-3.63,4.32c-1.53,0.97-3.28,1.46-5.25,1.46c-2.95,0-5.3-1.08-7.03-3.25
c-1.73-2.16-2.59-5.39-2.59-9.66c0-2.9,0.44-5.32,1.33-7.26c0.89-1.95,2.1-3.4,3.65-4.37c1.55-0.97,3.32-1.46,5.32-1.46
c2.96,0,5.28,1.1,6.98,3.29c1.7,2.19,2.56,5.46,2.56,9.79C326.04,408.27,325.6,410.65,324.71,412.56z M326.18,386.1
c-3-1.57-6.34-2.36-10.02-2.36c-3.74,0-7.12,0.79-10.15,2.36c-3.03,1.58-5.42,3.97-7.2,7.18c-1.77,3.2-2.66,7.26-2.66,12.15
c0,4.81,0.89,8.81,2.66,12c1.77,3.19,4.17,5.59,7.2,7.2c3.03,1.6,6.41,2.41,10.15,2.41c3.69,0,7.03-0.8,10.02-2.41
c3-1.6,5.38-4,7.15-7.2c1.77-3.19,2.66-7.2,2.66-12c0-4.9-0.89-8.95-2.66-12.15C331.56,390.07,329.18,387.67,326.18,386.1z"/>
<path id="u" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M375.07,404.33c0,2.98-0.48,5.48-1.45,7.49c-0.97,2.01-2.27,3.53-3.89,4.56c-1.62,1.03-3.41,1.54-5.38,1.54
c-2.31,0-4.12-0.67-5.44-2c-1.32-1.34-1.98-3.34-1.98-6.01v-25.15h-9.96v26.16c0,3.78,0.69,6.81,2.07,9.12
c1.38,2.31,3.25,3.98,5.62,5.02c2.36,1.04,5.01,1.56,7.93,1.56c2.98,0,5.61-0.82,7.89-2.45c1.87-1.34,3.39-3.27,4.6-5.73v7.42h9.96
v-41.1h-9.96V404.33z"/>
<path id="r" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M421.75,384.16c-2.5,0-4.78,0.85-6.82,2.56c-1.71,1.43-3.11,3.53-4.24,6.24v-8.2h-9.96v41.1h9.96v-17.98
c0-3.01,0.37-5.54,1.12-7.59c0.75-2.06,1.86-3.61,3.33-4.67c1.48-1.06,3.32-1.58,5.51-1.58c0.67,0,1.44,0.06,2.28,0.17
c0.84,0.11,1.63,0.25,2.36,0.42l0.17-9.96c-0.59-0.17-1.19-0.29-1.79-0.38C423.06,384.2,422.42,384.16,421.75,384.16z"/>
<path id="s" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M456.4,403.82l-9.71-3.63c-3.32-0.99-4.98-2.45-4.98-4.39c0-1.15,0.6-2.16,1.8-3.01c1.2-0.86,2.85-1.29,4.96-1.29
c2.34,0,4.08,0.39,5.23,1.18c1.16,0.79,1.8,1.86,1.94,3.21H465c-0.08-3.52-1.55-6.42-4.41-8.71c-2.86-2.29-6.9-3.44-12.13-3.44
c-5.26,0-9.46,1.07-12.6,3.19c-3.14,2.12-4.7,4.92-4.7,8.38c0,2.62,0.85,4.87,2.57,6.75c1.72,1.88,4.18,3.4,7.39,4.55l8.95,3.21 c1.83,0.56,3.16,1.17,3.99,1.84c0.83,0.66,1.25,1.57,1.25,2.72c0,0.9-0.31,1.72-0.93,2.45c-0.62,0.73-1.48,1.31-2.59,1.73
c-1.11,0.42-2.38,0.64-3.82,0.64c-2.62,0-4.69-0.47-6.2-1.39c-1.52-0.93-2.32-2.4-2.4-4.43h-9.2c0.03,2.87,0.8,5.32,2.32,7.36 c1.52,2.04,3.69,3.6,6.52,4.68s6.21,1.63,10.15,1.63c3.4,0,6.4-0.61,8.99-1.81c2.59-1.21,4.61-2.78,6.06-4.71
c1.45-1.93,2.17-3.97,2.17-6.14c0-2.59-0.87-4.73-2.62-6.42C461.99,406.27,459.55,404.89,456.4,403.82z"/></g>
</g>
</svg>

There was an extra group closing tag at the end and The XML declaration had some error though I'm not sure what that was about. Any way this below code works fine now.
Enjoy :)
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build
0) -->
<svg version="1.1" id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 596.97 663.91"
style="enable-background:new 0 0 596.97 663.91;" xml:space="preserve">
<style type="text/css">
#fs{
fill: black;
transition: 0.2s ease-in;
}
#fs:hover {
fill:white;
transition: 1s ease-in;
cursor: pointer;
}
.logo:hover .path {
animation: draw 1.5s forwards;
}
#keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
</style>
<g class="logo">
<polygon id="l" class="path" stroke="black" stroke-width="4" stroke-
linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-
dasharray="400" stroke-dashoffset="400" fill="none" points="310.71,174.24
264.83,174.24 264.83,78.12 235.86,78.12 235.86,199.58 310.71,199.58 "/>
<rect id="flip-i" class="path" stroke="black" stroke-width="4" stroke-
linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="350" stroke-dashoffset="350" fill="none" x="330.35" y="78.11" width="28.96" height="121.46"/>
<g>
<g>
<path id="p" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M447.88,128.3c-2.68,2.93-6.65,4.39-11.9,4.39h-17.47v-29.51h17.47c5.25,0,9.22,1.48,11.9,4.44
c2.68,2.96,4.03,6.43,4.03,10.41C451.91,121.96,450.56,125.38,447.88,128.3z M469.28,88.21c-8.21-6.73-19.31-10.09-33.3-10.09
h-46.62v121.46h29.15v-41.55h17.47c14,0,25.1-3.39,33.3-10.18c8.21-6.79,12.31-16.73,12.31-29.82
C481.59,104.88,477.49,94.94,469.28,88.21z"/>
<path id="fs" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="1050" stroke-dashoffset="1050" fill="black" d="M135.52,281.32c5.46,3.89,12.27,5.84,20.41,5.84c7.6,0,14.12-2.28,19.55-6.83
c5.43-4.56,10.17-11.48,14.21-20.77l11.86-27.97c1.57-3.56,3.02-6.23,4.35-8.01s3.14-2.67,5.43-2.67c2.48,0,4.54,1.39,6.2,4.16
c1.66,2.77,2.49,6.43,2.49,10.95c0,6.28-1.36,10.82-4.07,13.62c-2.71,2.81-6.06,4.57-10.04,5.29v28.42
c12.91-0.97,22.85-5.4,29.82-13.3c6.97-7.91,10.45-19.25,10.45-34.03c0-14.54-3.15-25.99-9.46-34.35
c-6.31-8.36-14.59-12.54-24.85-12.54c-8.75,0-15.66,2.41-20.72,7.24c-5.07,4.83-9.47,11.58-13.22,20.28l-11.49,26.43
c-1.87,4.65-3.53,7.86-4.98,9.64c-1.45,1.78-3.65,2.67-6.61,2.67c-2.42,0-4.31-0.85-5.7-2.53c-1.39-1.69-2.35-3.91-2.9-6.65
c-0.55-2.75-0.81-5.69-0.81-8.82c0-3.92,0.57-7.5,1.72-10.73c1.15-3.23,2.93-5.78,5.34-7.65c2.42-1.87,5.46-2.81,9.14-2.81
v-16.62h0.01V151.7h44.98v-24.71h-44.98v-23.8h50.23V78.11h-79.19v121.11c-3.97,3.97-7.04,8.68-9.2,14.17
c-2.92,7.42-4.39,15.47-4.39,24.16c0,10.5,1.37,19.45,4.12,26.84C125.95,271.78,130.05,277.43,135.52,281.32"/>
</g>
</g>
<rect id="side-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="800" stroke-dashoffset="800" fill="none" x="121.98" y="313.49" width="349.8" height="28.96"/>
<path id="d" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M148.41,402.19h68.42v14.03c0,6.57-1.46,12.26-4.39,17.06c-2.93,4.8-6.95,8.51-12.08,11.13
c-5.13,2.63-11.07,3.94-17.83,3.94c-6.52,0-12.34-1.31-17.47-3.94s-9.19-6.34-12.17-11.13c-2.99-4.8-4.48-10.49-4.48-17.06V402.19z
M121.98,416.22c0,12.49,2.46,23.5,7.37,33.04c4.92,9.53,11.92,17,21,22.4c9.08,5.4,19.8,8.1,32.18,8.1
c12.55,0,23.37-2.7,32.45-8.1c9.08-5.4,16.09-12.87,21.04-22.4c4.95-9.53,7.42-20.54,7.42-33.04v-42.99l-121.46,0V416.22z"/>
<polygon id="e" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="650" stroke-dashoffset="650" fill="none" points="121.98,583.57 147.32,583.57 147.32,531.34 169.86,531.34 169.86,580.31 195.02,580.31 195.02,531.34
218.37,531.34 218.37,583.57 243.44,583.57 243.44,502.38 121.98,502.38 "/>
<path id="t" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M285.06,418.85c-0.99,0.22-1.97,0.34-2.96,0.34c-3.2,0-4.81-1.69-4.81-5.07V391.5h11.14v-6.58h-11.14v-10.89h-9.96v10.89
h-5.74v6.58h5.74v22.96c0,2.87,0.6,5.23,1.79,7.09c1.2,1.86,2.8,3.24,4.81,4.14c2.01,0.9,4.23,1.35,6.65,1.35
c1.63,0,3.19-0.21,4.69-0.63c1.49-0.42,3.02-0.94,4.6-1.56l-1.43-7.01C287.17,418.29,286.04,418.62,285.06,418.85z"/>
<path id="o" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M324.71,412.56c-0.89,1.91-2.1,3.36-3.63,4.32c-1.53,0.97-3.28,1.46-5.25,1.46c-2.95,0-5.3-1.08-7.03-3.25
c-1.73-2.16-2.59-5.39-2.59-9.66c0-2.9,0.44-5.32,1.33-7.26c0.89-1.95,2.1-3.4,3.65-4.37c1.55-0.97,3.32-1.46,5.32-1.46
c2.96,0,5.28,1.1,6.98,3.29c1.7,2.19,2.56,5.46,2.56,9.79C326.04,408.27,325.6,410.65,324.71,412.56z M326.18,386.1
c-3-1.57-6.34-2.36-10.02-2.36c-3.74,0-7.12,0.79-10.15,2.36c-3.03,1.58-5.42,3.97-7.2,7.18c-1.77,3.2-2.66,7.26-2.66,12.15
c0,4.81,0.89,8.81,2.66,12c1.77,3.19,4.17,5.59,7.2,7.2c3.03,1.6,6.41,2.41,10.15,2.41c3.69,0,7.03-0.8,10.02-2.41
c3-1.6,5.38-4,7.15-7.2c1.77-3.19,2.66-7.2,2.66-12c0-4.9-0.89-8.95-2.66-12.15C331.56,390.07,329.18,387.67,326.18,386.1z"/>
<path id="u" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M375.07,404.33c0,2.98-0.48,5.48-1.45,7.49c-0.97,2.01-2.27,3.53-3.89,4.56c-1.62,1.03-3.41,1.54-5.38,1.54
c-2.31,0-4.12-0.67-5.44-2c-1.32-1.34-1.98-3.34-1.98-6.01v-25.15h-9.96v26.16c0,3.78,0.69,6.81,2.07,9.12
c1.38,2.31,3.25,3.98,5.62,5.02c2.36,1.04,5.01,1.56,7.93,1.56c2.98,0,5.61-0.82,7.89-2.45c1.87-1.34,3.39-3.27,4.6-5.73v7.42h9.96
v-41.1h-9.96V404.33z"/>
<path id="r" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M421.75,384.16c-2.5,0-4.78,0.85-6.82,2.56c-1.71,1.43-3.11,3.53-4.24,6.24v-8.2h-9.96v41.1h9.96v-17.98
c0-3.01,0.37-5.54,1.12-7.59c0.75-2.06,1.86-3.61,3.33-4.67c1.48-1.06,3.32-1.58,5.51-1.58c0.67,0,1.44,0.06,2.28,0.17
c0.84,0.11,1.63,0.25,2.36,0.42l0.17-9.96c-0.59-0.17-1.19-0.29-1.79-0.38C423.06,384.2,422.42,384.16,421.75,384.16z"/>
<path id="s" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M456.4,403.82l-9.71-3.63c-3.32-0.99-4.98-2.45-4.98-4.39c0-1.15,0.6-2.16,1.8-3.01c1.2-0.86,2.85-1.29,4.96-1.29
c2.34,0,4.08,0.39,5.23,1.18c1.16,0.79,1.8,1.86,1.94,3.21H465c-0.08-3.52-1.55-6.42-4.41-8.71c-2.86-2.29-6.9-3.44-12.13-3.44
c-5.26,0-9.46,1.07-12.6,3.19c-3.14,2.12-4.7,4.92-4.7,8.38c0,2.62,0.85,4.87,2.57,6.75c1.72,1.88,4.18,3.4,7.39,4.55l8.95,3.21 c1.83,0.56,3.16,1.17,3.99,1.84c0.83,0.66,1.25,1.57,1.25,2.72c0,0.9-0.31,1.72-0.93,2.45c-0.62,0.73-1.48,1.31-2.59,1.73
c-1.11,0.42-2.38,0.64-3.82,0.64c-2.62,0-4.69-0.47-6.2-1.39c-1.52-0.93-2.32-2.4-2.4-4.43h-9.2c0.03,2.87,0.8,5.32,2.32,7.36 c1.52,2.04,3.69,3.6,6.52,4.68s6.21,1.63,10.15,1.63c3.4,0,6.4-0.61,8.99-1.81c2.59-1.21,4.61-2.78,6.06-4.71
c1.45-1.93,2.17-3.97,2.17-6.14c0-2.59-0.87-4.73-2.62-6.42C461.99,406.27,459.55,404.89,456.4,403.82z"/>
</g>
</svg>

Math to create SVG pie chart without using CSS or JS

I am seeking to create a pie chart in pure SVG. I do not want to use JS or CSS, which most of the solutions on this site utilize. I came across this great article that explains how to create a pie chart in pure SVG: https://seesparkbox.com/foundry/how_to_code_an_SVG_pie_chart
The problem is that this article only describes how to make only one slice. I am seeking to create a pie chart that can contain up to a maximum of 360 elements (in which each slice of the pie will be ‭0.27‬% of it).
I have attempted to create another wedge in the following example by rotating it to -89 instead of the -90, but I'm not getting the results I'm looking for: https://codepen.io/HexylCinnamal/pen/KKwEjpK
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 20 20">
<circle r="10" cx="10" cy="10" fill="transparent"/>
<circle r="5" cx="10" cy="10" fill="transparent" stroke="tomato" stroke-width="10"
stroke-dasharray="calc(1 * 31.4 / 100) 31.4" transform="rotate(-90) translate(-20)"/>
<circle r="5" cx="10" cy="10" fill="transparent" stroke="blue" stroke-width="10"
stroke-dasharray="calc(1 * 31.4 / 100) 31.4" transform="rotate(-89) translate(-20)"/>
</svg>
I was wondering if there is any math I need to do to calculate the proper angle and translation to make the blue wedge appear next to the red one.

Unfortunately, calc() to calculate the attribute stroke-dasharray only works inChrome
For a cross-browser solution, it is necessary to calculate and assign values in the stroke-dasharray.
stroke-dasharray ="Circumference * 0.35, Circumference" or stroke-dasharray = "31.4 * 0.35, 31.4" or stroke-dasharray="10.99 31.4"
<svg height="20%" width="20%" viewBox="0 0 20 20" style="border:1px solid gray; ">
<circle r="10" cx="10" cy="10" fill="white" />
<circle r="5" cx="10" cy="10" fill="bisque"
stroke="tomato"
stroke-width="10"
stroke-dasharray="10.99 31.4" />
</svg>
For two segments:
red="35%"
blue="15%" stroke-dasharray = 31.4 * 0.15, 31.4 or stroke-dasharray ="4.71, 31.4"
<svg height="20%" width="20%" viewBox="0 0 20 20" style="border:1px solid; ">
<circle r="10" cx="10" cy="10" fill="white" />
<circle r="5" cx="10" cy="10" fill="bisque"
stroke="tomato"
stroke-width="10"
stroke-dasharray="10.99 31.4" />
<circle r="5" cx="10" cy="10" fill="bisque"
stroke="dodgerblue"
stroke-width="10"
stroke-dasharray="4.71 31.4" />
</svg>
We see that the blue sector overlaps the red sector; therefore, it is necessary to shift the blue sector by an amount equal to the length of the red sector 10.99
Add to shift the blue sector stroke-dashoffset="-10.99"
<svg height="20%" width="20%" viewBox="0 0 20 20" style="border:1px solid; ">
<circle r="5" cx="10" cy="10" fill="bisque" />
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="tomato"
stroke-width="10"
stroke-dasharray="10.99 31.4" />
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="dodgerblue"
stroke-width="10"
stroke-dasharray="4.71 31.4"
stroke-dashoffset="-10.99"
/>
</svg>
Four sectors
The solution works in all modern browsers including MS Edge
<!-- https://seesparkbox.com/foundry/how_to_code_an_SVG_pie_chart -->
<svg height="20%" width="20%" viewBox="0 0 20 20" style="border:1px solid; ">
<circle r="5" cx="10" cy="10" fill="bisque" />
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="tomato"
stroke-width="10"
stroke-dasharray="10.99 31.4" />
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="dodgerblue"
stroke-width="10"
stroke-dasharray="4.71 31.4"
stroke-dashoffset="-10.99"
/>
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="gold"
stroke-width="10"
stroke-dasharray="9.42 31.4"
stroke-dashoffset="-15.7"
/>
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="yellowgreen"
stroke-width="10"
stroke-dasharray="6.28 31.4"
stroke-dashoffset="-25.12"
/>
<text x="10" y="15" font-size="3px" fill="black" >35%</text>
<text x="1" y="14" font-size="3px" fill="black" >15%</text>
<text x="4" y="6" font-size="3px" fill="black" >30%</text>
<text x="12" y="8" font-size="3px" fill="black" >20%</text>
</svg>

One easy way to fix your problem is using a different viewBox: "-10 -10 20 20"making the point 0,0 the center of the svg canvas. Please observe that you don't need the cx and cy attributes anymore and the transformation is only rotating.
I'm supposing that you want to divide the circle in 100 parts. In this case you'll need to rotate the second circle -90 + 360/100 or -90 - 360/100 degs.
circle{stroke-dasharray:calc(31.4 / 100) 31.4;}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 20 20">
<circle r="10" fill="transparent"/>
<circle r="5" fill="transparent" stroke="tomato" stroke-width="10" transform="rotate(-90)"/>
<circle r="5" fill="transparent" stroke="blue" stroke-width="10" transform="rotate(-86.4)"/>
</svg>

Putting an outline on a mask in a SVG

Is it possible to put an outline or something on a mask so that you can actually see where the mask is? I have an element that I'm trying to mask, but I can't actually see if lining up to where it should.
What I'm trying to do is use the endScreen ID as a mask and using the startOrder ID for the object being masked. Right not it's masking it, but not correctly and it would be nice to visibly be able to see the mask where it is in the design.
<svg id="demo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 337.32 386.57">
<style>
.st0 {
fill: #fff
}
.st5 {
fill: #c32034
}
</style>
<defs>
<mask id="button-mask" width="1" height="1">
<path d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" fill="white" />
</mask>
</defs>
<path id="endScreen" class="st0" d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" />
<circle id="startScreen" class="st0" cx="167.67" cy="199.37" r="91" />
<path id="base" fill="none" stroke="#c1a88b" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M6 374.88h326.27" />
<path id="phoneOutline" d="M302.12 372.43V55.31c0-25.15-21.05-45.73-46.78-45.73H82.26c-25.73 0-46.78 20.58-46.78 45.73v317.13" fill="none" stroke="#c1a88b" stroke-width="7.358" stroke-linecap="round" stroke-miterlimit="10" />
<circle id="speakerSmall" cx="204.78" cy="43.04" r="4.4" fill="#c1a88b" />
<path id="speakerLarge" fill="none" stroke="#c1a88b" stroke-width="9" stroke-linecap="round" stroke-miterlimit="10" d="M132.04 43.23h59.45" />
<path id="startOrder" class="st5" d="M236.62 337.2H99.44c-6.6 0-12-5.4-12-12v-20.48c0-6.6 5.4-12 12-12h137.17c6.6 0 12 5.4 12 12v20.48c.01 6.6-5.39 12-11.99 12z" mask="url(#button-mask)" />
<path id="star" class="st5" d="M168.66 91.97l4.94 10.01 11.04 1.6-7.99 7.79 1.89 11.01-9.88-5.2-9.89 5.2 1.89-11.01-7.99-7.79 11.05-1.6z" />
<circle id="endOrder" cx="165.72" cy="313.53" r="36.5" fill="#89bd40" />
<path id="check" fill="none" stroke="#fdfeff" stroke-width="7" stroke-miterlimit="10" d="M147.32 255.76l12.88 11.5 23.93-23.46" />
</svg>

Define the path you want to use for the mask first as a template by itself, without any presentation attribute, and then reference it twice: first, inside the mask with fill="white", and then again with fill="none" stroke="blue" on top off your grafic.
You'll note your path isn't closed, but obviously a fill will create an implicit close between the endpoints, which the stroke doesn't show. An easy solution that changes effectively nothing for your mask is to add a z command at the end of the path definition.
.st0 {
fill: #fff
}
.st5 {
fill: #c32034
}
<svg id="demo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 337.32 386.57">
<defs>
<path id="shape" d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" fill="white" />
<mask id="button-mask" width="1" height="1">
<use href="#shape" fill="white" />
</mask>
</defs>
<path id="endScreen" class="st0" d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" />
<circle id="startScreen" class="st0" cx="167.67" cy="199.37" r="91" />
<path id="base" fill="none" stroke="#c1a88b" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M6 374.88h326.27" />
<path id="phoneOutline" d="M302.12 372.43V55.31c0-25.15-21.05-45.73-46.78-45.73H82.26c-25.73 0-46.78 20.58-46.78 45.73v317.13" fill="none" stroke="#c1a88b" stroke-width="7.358" stroke-linecap="round" stroke-miterlimit="10" />
<circle id="speakerSmall" cx="204.78" cy="43.04" r="4.4" fill="#c1a88b" />
<path id="speakerLarge" fill="none" stroke="#c1a88b" stroke-width="9" stroke-linecap="round" stroke-miterlimit="10" d="M132.04 43.23h59.45" />
<path id="startOrder" class="st5" d="M236.62 337.2H99.44c-6.6 0-12-5.4-12-12v-20.48c0-6.6 5.4-12 12-12h137.17c6.6 0 12 5.4 12 12v20.48c.01 6.6-5.39 12-11.99 12z" mask="url(#button-mask)" />
<path id="star" class="st5" d="M168.66 91.97l4.94 10.01 11.04 1.6-7.99 7.79 1.89 11.01-9.88-5.2-9.89 5.2 1.89-11.01-7.99-7.79 11.05-1.6z" />
<circle id="endOrder" cx="165.72" cy="313.53" r="36.5" fill="#89bd40" />
<path id="check" fill="none" stroke="#fdfeff" stroke-width="7" stroke-miterlimit="10" d="M147.32 255.76l12.88 11.5 23.93-23.46" />
<use href="#shape" fill="none" stroke="blue" />
</svg>
It might be worth noting that this is a solution only fitting for your specific situation. If the mask had a stroke defined, another stroke around that one cannot be shown like that. Effectively, the technique is more fit for a clip-path (that is pure form) than a mask (which is a arbitrary grafical structure).

Display a lot of images in background (SVG)

I would like to display, in SVG, a lot of circles. Each of us would contain an image.
I've found a way for doing that. I define a pattern :
<defs>
<pattern preserveAspectRatio="true" patternContentUnits="objectBoundingBox" height="1" width="1" y="0" x="0" id="imageExample">
<image height="1" width="1" y="0" x="0" xlink:href="img/imageExample.png"/>
</pattern>
</defs>
And then I display the circle :
<circle cx=x cy=y r=r stroke="white" stroke-width="2" fill="url(#imageExample)"/>
My question is : is it necessary to define 1000 patterns if I want to display 1000 circles ?
[edit] I want that each circle has a different background image, sorry.

of course, i isn't. see the demo below, also avaliable online:
<?xml version="1.0" encoding="utf-8"?>
<!-- SO: http://stackoverflow.com/questions/16174765/display-a-lot-of-images-in-background-svg -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="20cm" height="20cm"
viewBox="0 0 1000 1000"
preserveAspectRatio="xMinYMin"
style="background-color:white; border: solid 1px black;"
>
<defs>
<pattern preserveAspectRatio="true" patternContentUnits="objectBoundingBox" height="1" width="1" y="0" x="0" id="imageExample">
<image height="1" width="1" y="0" x="0" xlink:href="img/imageExample.png"/>
</pattern>
</defs>
<circle cx="123" cy="109" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
<circle cx="456" cy="332" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
<circle cx="12" cy="444" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
<circle cx="77" cy="567" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
<circle cx="66" cy="712" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
<circle cx="47" cy="855" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
<circle cx="843" cy="30" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
<circle cx="112" cy="321" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
<circle cx="387" cy="543" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
<circle cx="444" cy="67" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
</svg>

SVG Elements not in view on page load do not display

I have an SVG image (with code generated by Adobe Illustrator CS6) embedded in a web page. I've isolated the SVG code in this jsFiddle (it is also embedded below).
In Chrome (but not Firefox), when the bottom part of the SVG isn't in view, it doesn't render. Shrink the window and scroll to the top of the HTML section on the jsFiddle and then reload to see what I'm talking about. Once you click the section, it appears.
What can I do to fix this?
Edit: WebKit bug filed, as it appears to be a WebKit bug. View bug report
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="690px" height="420px" viewBox="0 43 690 420" enable-background="new 0 43 690 420" xml:space="preserve">
<defs></defs>
<filter id="fullblur" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
<filter id="halfblur" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
<filter id="noblur" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="0" />
</filter>
<!-- BACKGROUND (hidden) -->
<rect y="43" display="none" fill="#D1DBBB" width="690" height="420"/>
<!-- STAGE -->
<ellipse fill="#CC3333" stroke="#000000" cx="339.5" cy="43" rx="169.5" ry="42.5"/>
<!-- SEATS -->
<g>
<!-- STUDENT SECTIONS -->
<g id="studhover">
<g filter="url(#halfblur)" id="studchart" class="chartsection">
<g id="s1">
<path class="sFill" fill="#FECB2F" d="M90.75,136c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V90.5c0-2.761-2.239-5-5-5h-150
c-2.761,0-5,2.239-5,5V136z"/>
<path class="sStroke" fill="none" stroke="#000000" d="M90.75,136c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V90.5c0-2.761-2.239-5-5-5h-150
c-2.761,0-5,2.239-5,5V136z"/>
</g>
<g id="s2">
<path class="sFill" fill="#FECB2F" d="M265.75,150c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
c-2.761,0-5,2.239-5,5V150z"/>
<path class="sStroke" fill="none" stroke="#000000" d="M265.75,150c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
c-2.761,0-5,2.239-5,5V150z"/>
</g>
<g id="s3">
<path class="sFill" fill="#FECB2F" d="M439.25,136c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V90.5c0-2.761-2.238-5-5-5h-150c-2.762,0-5,2.239-5,5V136z"/>
<path class="sStroke" fill="none" stroke="#000000" d="M439.25,136c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V90.5c0-2.761-2.238-5-5-5h-150
c-2.762,0-5,2.239-5,5V136z"/>
</g>
<g id="s4">
<path class="sFill" fill="#FECB2F" d="M90.75,205.5c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V160c0-2.761-2.239-5-5-5h-150
c-2.761,0-5,2.239-5,5V205.5z"/>
<path class="sStroke" fill="none" stroke="#000000" d="M90.75,205.5c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V160c0-2.761-2.239-5-5-5h-150
c-2.761,0-5,2.239-5,5V205.5z"/>
</g>
<g id="s5">
<path class="sFill" fill="#FECB2F" d="M265.75,218c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
c-2.761,0-5,2.239-5,5V218z"/>
<path class="sStroke" fill="none" stroke="#000000" d="M265.75,218c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
c-2.761,0-5,2.239-5,5V218z"/>
</g>
<g id="s6">
<path class="sFill" fill="#FECB2F" d="M439.25,205.5c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V160c0-2.761-2.238-5-5-5h-150
c-2.762,0-5,2.239-5,5V205.5z"/>
<path class="sStroke" fill="none" stroke="#000000" d="M439.25,205.5c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V160c0-2.761-2.238-5-5-5h-150
c-2.762,0-5,2.239-5,5V205.5z"/>
</g>
</g>
<!-- Filling in the gaps -->
<g>
<rect x="251" y="84" fill="transparent" width="15" height="140" id="sVertLine1" />
<rect x="425" y="84" fill="transparent" width="15" height="140" id="sVertLine2" />
<rect x="266" y="84" fill="transparent" width="159" height="15" id="sHorizLine1" />
<rect x="90" y="140" fill="transparent" width="161" height="15" id="sHorizLine2a" />
<rect x="440" y="140" fill="transparent" width="161" height="15" id="sHorizLine2b" />
<rect x="266" y="153" fill="transparent" width="161" height="15" id="sHorizLine3" />
<rect x="90" y="210" fill="transparent" width="161" height="12" id="sHorizLine4a" />
<rect x="440" y="210" fill="transparent" width="161" height="12" id="sHorizLine4b" />
</g>
</g>
<!-- GUEST SECTIONS -->
<g id="guesthover">
<g filter="url(#halfblur)" id="guestchart" class="chartsection">
<g>
<path class="gFill" fill="#3333CC" d="M91.5,273c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5v-45.5c0-2.761-2.239-5-5-5h-150
c-2.761,0-5,2.239-5,5V273z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M91.5,273c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5v-45.5c0-2.761-2.239-5-5-5h-150
c-2.761,0-5,2.239-5,5V273z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M440,273c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5H445c-2.762,0-5,2.239-5,5
V273z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M440,273c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5H445
c-2.762,0-5,2.239-5,5V273z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M91.5,342.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V297c0-2.762-2.239-5-5-5h-150
c-2.761,0-5,2.238-5,5V342.5z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M91.5,342.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V297c0-2.762-2.239-5-5-5h-150
c-2.761,0-5,2.238-5,5V342.5z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M440,342.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V297c0-2.762-2.238-5-5-5H445c-2.762,0-5,2.238-5,5
V342.5z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M440,342.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V297c0-2.762-2.238-5-5-5H445
c-2.762,0-5,2.238-5,5V342.5z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M266.5,287c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5h-150
c-2.761,0-5,2.239-5,5V287z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M266.5,287c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5h-150
c-2.761,0-5,2.239-5,5V287z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M266.5,355c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
c-2.761,0-5,2.238-5,5V355z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M266.5,355c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
c-2.761,0-5,2.238-5,5V355z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M91.5,410.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V365c0-2.762-2.239-5-5-5h-150
c-2.761,0-5,2.238-5,5V410.5z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M91.5,410.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V365c0-2.762-2.239-5-5-5h-150
c-2.761,0-5,2.238-5,5V410.5z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M440,410.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V365c0-2.762-2.238-5-5-5H445c-2.762,0-5,2.238-5,5
V410.5z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M440,410.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V365c0-2.762-2.238-5-5-5H445
c-2.762,0-5,2.238-5,5V410.5z"/>
</g>
<g>
<path class="gFill" fill="#3333CC" d="M266.5,423c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
c-2.761,0-5,2.238-5,5V423z"/>
<path class="gStroke" fill="none" stroke="#000000" d="M266.5,423c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
c-2.761,0-5,2.238-5,5V423z"/>
</g>
</g>
<!-- Filling in the gaps -->
<g>
<rect x="251" y="224" fill="transparent" width="15" height="206" id="gVertLine1" />
<rect x="425" y="224" fill="transparent" width="15" height="206" id="gVertLine2" />
<rect x="266" y="222" fill="transparent" width="159" height="15" id="gHorizLine1" />
<rect x="90" y="278" fill="transparent" width="161" height="15" id="gHorizLine2a" />
<rect x="440" y="278" fill="transparent" width="161" height="15" id="gHorizLine2b" />
<rect x="266" y="291" fill="transparent" width="161" height="15" id="gHorizLine3" />
<rect x="90" y="348" fill="transparent" width="161" height="15" id="gHorizLine4a" />
<rect x="440" y="348" fill="transparent" width="161" height="15" id="gHorizLine4b" />
<rect x="266" y="360" fill="transparent" width="161" height="15" id="gHorizLine5" />
<rect x="90" y="417" fill="transparent" width="161" height="13" id="gHorizLine4a" />
<rect x="440" y="417" fill="transparent" width="161" height="13" id="gHorizLine4b" />
</g>
</g>
</g>
</svg>

This is a Webkit bug caused by the use of filters. I removed the <filter> sections and the flter="url(...)" tags to stop the filters from running and it now works.