I have a bunch of SVG shapes(Hexagones) that render perfectly
on desktop screen. However when the screen is reduced to tablet and mobile
some of the hexagones do not render properly.
I have tried with media query but still not responsive.
BTW this snippet html is made manually so it has a bunch of duplicate code
with different x,y positions for hexagone, so do not be scared a lot of html codes.
I would appreciate any help.
body {
background-color: #333;
font-family: 'Luckiest Guy', cursive;
}
#hexGrid {
width: 80vw;
height: 80vh;
}
#media (max-width : 600px) {
#hexGrid {
width:84vw;
height: 100vh;
}
}
<svg id="hexGrid">
<svg viewBox="0 0 200 200">
<defs>
<g id="pod">
<polygon stroke="#ffffff" stroke-width=".5" points="7.43,-12.41 -8.11,-12.39 -15.87,1.07 -8.09,14.52 7.45,14.51 15.21,1.05" />
</g>
</defs>
</svg>
<!--ODD COLUMNS-->
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(50, 94.5)" fill="transparent" />
<text transform="translate(50, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">A1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(50, 121.5)" fill="transparent" />
<text transform="translate(50, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">A2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(50, 148.5)" fill="transparent" />
<text transform="translate(50, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">A3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(97, 94.5)" fill="transparent" />
<text transform="translate(97, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">C1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(97, 121.5)" fill="transparent" />
<text transform="translate(97, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">C2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(97, 148.5)" fill="transparent" />
<text transform="translate(97, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">C3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(144, 94.5)" fill="transparent" />
<text transform="translate(144, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">E1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(144, 121.5)" fill="transparent" />
<text transform="translate(144, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">E2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(144, 148.5)" fill="transparent" />
<text transform="translate(144, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">E3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(191, 94.5)" fill="transparent" />
<text transform="translate(191, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">G1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(191, 121.5)" fill="transparent" />
<text transform="translate(191, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">G2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(191, 148.5)" fill="transparent" />
<text transform="translate(191, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">G3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(238, 94.5)" fill="transparent" />
<text transform="translate(238, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">I1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(238, 121.5)" fill="transparent" />
<text transform="translate(238, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">I2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(238, 148.5)" fill="transparent" />
<text transform="translate(238, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">I3</text>
</g>
</svg>
<!--EVEN COLUMNS-->
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(73.52, 54.5)" fill="transparent" />
<text transform="translate(73.52, 54.54)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(73.52, 81.5)" fill="transparent" />
<text transform="translate(73.52, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(73.52, 108.5)" fill="transparent" />
<text transform="translate(73.52, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(73.52, 135.5)" fill="transparent" />
<text transform="translate(73.52, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B4</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(120.5, 54.5)" fill="transparent" />
<text transform="translate(120.5, 54.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(120.5, 81.5)" fill="transparent" />
<text transform="translate(120.5, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(120.5, 108.5)" fill="transparent" />
<text transform="translate(120.5, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(120.5, 135.5)" fill="transparent" />
<text transform="translate(120.5, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D4</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(167.5, 54.5)" fill="transparent" />
<text transform="translate(167.5, 54.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(167.5, 81.5)" fill="transparent" />
<text transform="translate(167.5, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(167.5, 108.5)" fill="transparent" />
<text transform="translate(167.5, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(167.5, 135.5)" fill="transparent" />
<text transform="translate(167.5, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F4</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(214.5, 54.5)" fill="transparent" />
<text transform="translate(214.5, 54.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(214.5, 81.5)" fill="transparent" />
<text transform="translate(214.5, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(214.5, 108.5)" fill="transparent" />
<text transform="translate(214.5, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(214.5, 135.5)" fill="transparent" />
<text transform="translate(214.5, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H4</text>
</g>
</svg>
</svg>
I think the issue is to maintain the correct aspect ratio of the view box of the outer, parent SVG regardless of the window aspect ratio.
body {
background-color: #333;
font-family: 'Luckiest Guy', cursive;
}
#hexGrid {
width: 100%;
height: 100%;
}
#media (max-width : 600px) {
#hexGrid {
width: 100%;
height: 100%;
}
}
<svg id="hexGrid" viewBox="0 0 2000 1000">
<svg viewBox="0 0 200 200">
<defs>
<g id="pod">
<polygon stroke="#ffffff" stroke-width=".5" points="7.43,-12.41 -8.11,-12.39 -15.87,1.07 -8.09,14.52 7.45,14.51 15.21,1.05" />
</g>
</defs>
</svg>
<!--ODD COLUMNS-->
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(50, 94.5)" fill="transparent" />
<text transform="translate(50, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">A1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(50, 121.5)" fill="transparent" />
<text transform="translate(50, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">A2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(50, 148.5)" fill="transparent" />
<text transform="translate(50, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">A3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(97, 94.5)" fill="transparent" />
<text transform="translate(97, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">C1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(97, 121.5)" fill="transparent" />
<text transform="translate(97, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">C2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(97, 148.5)" fill="transparent" />
<text transform="translate(97, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">C3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(144, 94.5)" fill="transparent" />
<text transform="translate(144, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">E1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(144, 121.5)" fill="transparent" />
<text transform="translate(144, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">E2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(144, 148.5)" fill="transparent" />
<text transform="translate(144, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">E3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(191, 94.5)" fill="transparent" />
<text transform="translate(191, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">G1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(191, 121.5)" fill="transparent" />
<text transform="translate(191, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">G2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(191, 148.5)" fill="transparent" />
<text transform="translate(191, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">G3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(238, 94.5)" fill="transparent" />
<text transform="translate(238, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">I1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(238, 121.5)" fill="transparent" />
<text transform="translate(238, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">I2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(238, 148.5)" fill="transparent" />
<text transform="translate(238, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">I3</text>
</g>
</svg>
<!--EVEN COLUMNS-->
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(73.52, 54.5)" fill="transparent" />
<text transform="translate(73.52, 54.54)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(73.52, 81.5)" fill="transparent" />
<text transform="translate(73.52, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(73.52, 108.5)" fill="transparent" />
<text transform="translate(73.52, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(73.52, 135.5)" fill="transparent" />
<text transform="translate(73.52, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B4</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(120.5, 54.5)" fill="transparent" />
<text transform="translate(120.5, 54.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(120.5, 81.5)" fill="transparent" />
<text transform="translate(120.5, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(120.5, 108.5)" fill="transparent" />
<text transform="translate(120.5, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(120.5, 135.5)" fill="transparent" />
<text transform="translate(120.5, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D4</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(167.5, 54.5)" fill="transparent" />
<text transform="translate(167.5, 54.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(167.5, 81.5)" fill="transparent" />
<text transform="translate(167.5, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(167.5, 108.5)" fill="transparent" />
<text transform="translate(167.5, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(167.5, 135.5)" fill="transparent" />
<text transform="translate(167.5, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F4</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(214.5, 54.5)" fill="transparent" />
<text transform="translate(214.5, 54.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(214.5, 81.5)" fill="transparent" />
<text transform="translate(214.5, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(214.5, 108.5)" fill="transparent" />
<text transform="translate(214.5, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(214.5, 135.5)" fill="transparent" />
<text transform="translate(214.5, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H4</text>
</g>
</svg>
</svg>
First, i'm not sure it's a good practice to use nested SVG... (Edit: After some research it's seems not a bad practice...)
And your issue is related to viewbox of SVG. You can try with following viewbox: <svg viewBox="0 0 290 200">
And you can safely remove nested SVG
#hexGrid {
width: 80vw;
height: 80vh;
}
body {
background-color: #666;
font-family: 'Luckiest Guy', cursive;
}
<svg id="hexGrid" viewBox="0 0 290 200">
<defs>
<g id="pod">
<polygon stroke="#ffffff" stroke-width=".5" points="7.43,-12.41 -8.11,-12.39 -15.87,1.07 -8.09,14.52 7.45,14.51 15.21,1.05" />
</g>
</defs>
<!--ODD COLUMNS-->
<g >
<use xlink:href="#pod" transform="translate(50, 94.5)" fill="transparent" />
<text transform="translate(50, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">A1</text>
</g>
<g >
<use xlink:href="#pod" transform="translate(50, 121.5)" fill="transparent" />
<text transform="translate(50, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">A2</text>
</g>
<g >
<use xlink:href="#pod" transform="translate(50, 148.5)" fill="transparent" />
<text transform="translate(50, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">A3</text>
</g>
<g >
<use xlink:href="#pod" transform="translate(97, 94.5)" fill="transparent" />
<text transform="translate(97, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">C1</text>
</g>
<g >
<use xlink:href="#pod" transform="translate(97, 121.5)" fill="transparent" />
<text transform="translate(97, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">C2</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(97, 148.5)" fill="transparent" />
<text transform="translate(97, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">C3</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(144, 94.5)" fill="transparent" />
<text transform="translate(144, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">E1</text>
</g>
<g >
<use xlink:href="#pod" transform="translate(144, 121.5)" fill="transparent" />
<text transform="translate(144, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">E2</text>
</g>
<g >
<use xlink:href="#pod" transform="translate(144, 148.5)" fill="transparent" />
<text transform="translate(144, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">E3</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(191, 94.5)" fill="transparent" />
<text transform="translate(191, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">G1</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(191, 121.5)" fill="transparent" />
<text transform="translate(191, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">G2</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(191, 148.5)" fill="transparent" />
<text transform="translate(191, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">G3</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(238, 94.5)" fill="transparent" />
<text transform="translate(238, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">I1</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(238, 121.5)" fill="transparent" />
<text transform="translate(238, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">I2</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(238, 148.5)" fill="transparent" />
<text transform="translate(238, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">I3</text>
</g>
<!--EVEN COLUMNS-->
<g>
<use xlink:href="#pod" transform="translate(73.52, 54.5)" fill="transparent" />
<text transform="translate(73.52, 54.54)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B1</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(73.52, 81.5)" fill="transparent" />
<text transform="translate(73.52, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B2</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(73.52, 108.5)" fill="transparent" />
<text transform="translate(73.52, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B3</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(73.52, 135.5)" fill="transparent" />
<text transform="translate(73.52, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B4</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(120.5, 54.5)" fill="transparent" />
<text transform="translate(120.5, 54.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D1</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(120.5, 81.5)" fill="transparent" />
<text transform="translate(120.5, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D2</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(120.5, 108.5)" fill="transparent" />
<text transform="translate(120.5, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D3</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(120.5, 135.5)" fill="transparent" />
<text transform="translate(120.5, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D4</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(167.5, 54.5)" fill="transparent" />
<text transform="translate(167.5, 54.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F1</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(167.5, 81.5)" fill="transparent" />
<text transform="translate(167.5, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F2</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(167.5, 108.5)" fill="transparent" />
<text transform="translate(167.5, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F3</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(167.5, 135.5)" fill="transparent" />
<text transform="translate(167.5, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F4</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(214.5, 54.5)" fill="transparent" />
<text transform="translate(214.5, 54.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H1</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(214.5, 81.5)" fill="transparent" />
<text transform="translate(214.5, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H2</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(214.5, 108.5)" fill="transparent" />
<text transform="translate(214.5, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H3</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(214.5, 135.5)" fill="transparent" />
<text transform="translate(214.5, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H4</text>
</g>
</svg>
Related
I am working with a svg element as follows and I am using css to control the font-size of the svg text.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"></rect>
<rect class="boundRect" x="70" y="70" width="1160" height="600" fill="none" stroke="green"></rect>
<g class="bound" style="transform: translate(70px, 70px);">
<g class="yAxis">
<g class="yAxisLeft" fill="none" font-size="10" font-family="sans-serif" text-anchor="end">
<g class="tick" opacity="1" transform="translate(0,411.7647058823529)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="-3" dy="0.32em" transform="matrix(1 0 0 1 13.1462 0)" text-anchor="middle">20%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,223.52941176470583)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="-3" dy="0.32em" transform="matrix(1 0 0 1 13.1462 0)" text-anchor="middle">40%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,35.29411764705883)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="-3" dy="0.32em" text-anchor="middle" transform="matrix(1 0 0 1 12.3462 0)">60%</text>
</g>
</g>
</g>
</g>
</svg>
However, when I increase the font-size, e.g.
.tick>text{
font-size: xx-large;
}
it changes to this
Is there anyway I can have the font-size increased, yet the text would be aligned to the green line? like below
As an alternative, I tried following
.tick>text{
transform-origin: left;
transform-box: fill-box;
transform: scaleY(2.5);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"></rect>
<rect class="boundRect" x="70" y="70" width="1160" height="600" fill="none" stroke="green"></rect>
<g class="bound" style="transform: translate(70px, 70px);">
<g class="yAxis">
<g class="yAxisLeft" fill="none" font-size="10" font-family="sans-serif" text-anchor="end">
<g class="tick" opacity="1" transform="translate(0,411.7647058823529)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="-3" dy="0.32em" transform="matrix(1 0 0 1 13.1462 0)" text-anchor="middle">20%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,223.52941176470583)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="-3" dy="0.32em" transform="matrix(1 0 0 1 13.1462 0)" text-anchor="middle">40%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,35.29411764705883)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="-3" dy="0.32em" text-anchor="middle" transform="matrix(1 0 0 1 12.3462 0)">60%</text>
</g>
</g>
</g>
</g>
</svg>
.tick>text{
transform-origin: left;
transform-box: fill-box;
transform: scaleY(2.5);
}
but it is not applying the scaling from the desired origin.
Try positioning your test at x="0" instead of x="-3".
Also remove the transform and test-anchor="middle/end" attributes.
.tick>text{
transform-origin: left;
transform-box: fill-box;
transform: scaleY(2.5);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"></rect>
<rect class="boundRect" x="70" y="70" width="1160" height="600" fill="none" stroke="green"></rect>
<g class="bound" style="transform: translate(70px, 70px);">
<g class="yAxis">
<g class="yAxisLeft" fill="none" font-size="10" font-family="sans-serif">
<g class="tick" opacity="1" transform="translate(0,411.7647058823529)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="0" dy="0.32em">20%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,223.52941176470583)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="0" dy="0.32em">40%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,35.29411764705883)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="0" dy="0.32em">60%</text>
</g>
</g>
</g>
</g>
</svg>
How can i animated fill up a path element with color in a SVG ? In the lower area I added a rect element, that worked fine. But how can i fill up the rest (the head) ?
The SVG looks like this
And here is my SVG code
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 110.6 225.5" style="enable-background:new 0 0 110.6 225.5" xml:space="preserve">
<style type="text/css">
.st2{
fill:#FEC400;
}
}
</style>
<g>
<g>
<g>
<!-- mouth -->
<path d="M56.9,94c-4.7,0-9.3-1.3-13.4-3.7c-3.8-2.2-6.9-5.4-9.2-9.1c-0.9-1.5-0.4-3.5,1.1-4.4s3.5-0.4,4.4,1.1
c1.7,2.8,4.1,5.2,7,6.9c4.6,2.7,10,3.5,15.2,2.2s9.6-4.6,12.3-9.2c0.9-1.5,2.9-2,4.4-1.1s2,2.9,1.1,4.4
c-3.6,6.1-9.4,10.4-16.2,12.2C61.3,93.7,59.1,94,56.9,94z"/>
</g>
<g>
<!-- eye -->
<circle cx="78.3" cy="60.5" r="6.5"/>
</g>
<g>
<!-- eye -->
<circle cx="38.2" cy="60.5" r="6.5"/>
</g>
<g>
<!-- lower -->
<rect class="st2" x="5" y="220" width="24" height="90">
<animate attributeName="y" values="220 ; 100" dur="2.5s"/>
<animate attributeName="height" values="90 ; 120" dur="2.5s"/>
</rect>
</g>
<g>
<!-- figure, needs to fill up with color -->
<path d="M26.9,225.5H3.2c-1.8,0-3.2-1.4-3.2-3.2v-146c-0.1-19.2,21.4-36.8,50-40.9c14.4-2.1,28.6-0.4,39.8,4.7
c11.7,5.4,19,13.8,20.4,23.8l0,0c3,21.2-11.1,37.6-37.9,43.9c-13.6,3.2-30.9,1.1-42.3-3v117.3C30.1,224.1,28.6,225.5,26.9,225.5z
M6.4,219.1h17.3V100.2c0-1.1,0.6-2.1,1.5-2.7s2.1-0.6,3.1-0.2c9.6,4.7,28.6,7.7,42.6,4.4c23.2-5.5,35.6-19.3,33-36.8
c-1.1-7.8-7.1-14.5-16.7-18.9c-10.1-4.6-23-6.1-36.3-4.2c-25,3.6-44.6,18.8-44.5,34.5C6.4,76.3,6.4,219.1,6.4,219.1z"/>
</g>
</g>
</g>
</svg>
It works with a mask:
<svg width="200" height="190">
<g transform="translate(0,-35)">
<mask id="shape-mask">
<rect x="0" y="0" width="200" height="230" fill="black" />
<path d="M26.9,225.5H3.2c-1.8,0-3.2-1.4-3.2-3.2v-146c-0.1-19.2,21.4-36.8,50-40.9c14.4-2.1,28.6-0.4,39.8,4.7
c11.7,5.4,19,13.8,20.4,23.8l0,0c3,21.2-11.1,37.6-37.9,43.9c-13.6,3.2-30.9,1.1-42.3-3v117.3C30.1,224.1,28.6,225.5,26.9,225.5z" fill="white" />
</mask>
<rect y="230" width="200" height="0" fill="orange" mask="url(#shape-mask)">
<animate attributeName="y" values="230 ; 0" dur="2.5s"/>
<animate attributeName="height" values="0 ; 230" dur="2.5s"/>
</rect>
<path d="M56.9,94c-4.7,0-9.3-1.3-13.4-3.7c-3.8-2.2-6.9-5.4-9.2-9.1c-0.9-1.5-0.4-3.5,1.1-4.4s3.5-0.4,4.4,1.1
c1.7,2.8,4.1,5.2,7,6.9c4.6,2.7,10,3.5,15.2,2.2s9.6-4.6,12.3-9.2c0.9-1.5,2.9-2,4.4-1.1s2,2.9,1.1,4.4
c-3.6,6.1-9.4,10.4-16.2,12.2C61.3,93.7,59.1,94,56.9,94z"/>
<circle cx="78.3" cy="60.5" r="6.5"/>
<circle cx="38.2" cy="60.5" r="6.5"/>
<path d="M26.9,225.5H3.2c-1.8,0-3.2-1.4-3.2-3.2v-146c-0.1-19.2,21.4-36.8,50-40.9c14.4-2.1,28.6-0.4,39.8,4.7
c11.7,5.4,19,13.8,20.4,23.8l0,0c3,21.2-11.1,37.6-37.9,43.9c-13.6,3.2-30.9,1.1-42.3-3v117.3C30.1,224.1,28.6,225.5,26.9,225.5z
M6.4,219.1h17.3V100.2c0-1.1,0.6-2.1,1.5-2.7s2.1-0.6,3.1-0.2c9.6,4.7,28.6,7.7,42.6,4.4c23.2-5.5,35.6-19.3,33-36.8
c-1.1-7.8-7.1-14.5-16.7-18.9c-10.1-4.6-23-6.1-36.3-4.2c-25,3.6-44.6,18.8-44.5,34.5C6.4,76.3,6.4,219.1,6.4,219.1z"/>
</g>
</svg>
I'm quite new to SVG animations and I am struggleing a bit with it.
I have written the below code to rotate an image around a center point. However, it is cutting off the top and left of the immage.
<svg width="350" height="350">
<g transform="translate(175, 175)">
<svg>
<g>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="500ms" repeatCount="1"></animateTransform>
<circle cx="0" cy="0" r="140" stroke="#70AD47" stroke-width="5" fill="#E2F0D6"></circle>
<text x="0" y="0" text-anchor="middle" dy="10" class="bubbleTitle" fill="#70AD47">Top</text>
<circle cx="0" cy="-120" r="50" stroke="#70AD47" stroke-width="3" fill="#E2F0D6"></circle>
<text x="0" y="-120" text-anchor="middle" dy="0">
<tspan font-size="14" class="bubbleText" x="0" dy="-1.5em">Sent</tspan>
<tspan font-size="40" class="bubbleText" x="0" dy="1.0em">#</tspan>
</text>
</g>
</svg>
</g>
</svg>
Any help with this would be hugely apreciated.
Thank you
The viewBox attribute is missing. If you set it properly the inner translation is no longer necessary.
Also remove the nested SVG element
<svg width="350" height="350" viewBox="-140 -175 280 350" xmlns="http://www.w3.org/2000/svg">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="500ms" repeatCount="1"></animateTransform>
<circle cx="0" cy="0" r="140" stroke="#70AD47" stroke-width="5" fill="#E2F0D6"></circle>
<text x="0" y="0" text-anchor="middle" dy="10" class="bubbleTitle" fill="#70AD47">Top</text>
<circle cx="0" cy="-120" r="50" stroke="#70AD47" stroke-width="3" fill="#E2F0D6"></circle>
<text x="0" y="-120" text-anchor="middle" dy="0">
<tspan font-size="14" class="bubbleText" x="0" dy="-1.5em">Sent</tspan>
<tspan font-size="40" class="bubbleText" x="0" dy="1.0em">#</tspan>
</text>
</svg>
enter image description hereI used SVGator to create a simple animation so I can use it on my website. The animation shows perfectly fine in the editor. However, when I export it and view it from my browser (Chrome 67 / Windows 10) or from my website, few elements skip their animation and weirdly jump straight to their end state.
Here's a link to the SVG: http://jmp.sh/2DOfAD2
P.S I am no expert at coding so I can't really figure out what's wrong with it by looking at the lines of code. But here is the link to the code for you
And an excerpt of the code:
</style>
<g id="B1xEEHH6bm" display="none">
</g>
<g id="S1-EErHpW7">
<g id="rkfVNrr6-m">
<g id="r17VVSS6bm">
<path d="M116.998,343.135" id="ByENEBBaZX"/>
<path d="M116.998,343.135" id="BkHNNBHpZQ"/>
</g>
</g>
<g id="Sk8VVrBTbm">
<g id="HJDV4rSpbQ">
<g id="H1dNESHa-m">
<polygon points="103.563,307.839 83.113,319.964 83.113,294.62 103.563,282.52 " id="SkKVEBBTbm"/>
<polygon points="83.113,319.964 43.361,307.29 43.361,281.939 83.113,294.62 " id="S1qNESr6WQ"/>
<polygon points="83.113,294.62 43.361,281.939 63.813,269.84 103.563,282.52 " id="r1o4VBBpbX"/>
</g>
<g id="SyhN4HH6WX">
<rect x="52.305" y="278.46" width="11.608" height="3.49" id="r1TV4SSpZm"/>
<g id="BJCN4rrabX">
<ellipse cx="58.109" cy="281.95" rx="5.804" ry="2.604" id="Hy1g44BHpZQ"/>
<ellipse cx="58.109" cy="278.46" rx="5.804" ry="2.604" id="S1ee4VBHTbm"/>
</g>
</g>
<g id="rJ-g4NSSa-m">
<rect x="62.747" y="271.93" width="11.608" height="3.49" id="r1MxNNBraW7"/>
<g id="B1XxNVHHTbm">
<ellipse cx="68.551" cy="275.42" rx="5.804" ry="2.605" id="S1NxVNrSp-7"/>
<ellipse cx="68.551" cy="271.93" rx="5.804" ry="2.606" id="SJHlV4BB6bQ"/>
</g>
</g>
<g id="BJUg4NHHT-Q">
<rect x="73.521" y="285.398" width="11.608" height="3.49" id="ryDgNErB6-m"/>
<g id="SkOgEVBrTWX">
<ellipse cx="79.325" cy="288.889" rx="5.804" ry="2.606" id="ByKe4VrH6-7"/>
<ellipse cx="79.325" cy="285.398" rx="5.804" ry="2.605" id="ryqlN4rHa-m"/>
</g>
</g>
<g id="r1sx44rHT-m">
<rect x="83.581" y="279.32" width="11.608" height="3.49" id="S1nl4NHHpZm"/>
<g id="ryTx4Nrr6WQ">
<ellipse cx="89.385" cy="282.811" rx="5.804" ry="2.606" id="r1CgENHBaWm"/>
<ellipse cx="89.385" cy="279.32" rx="5.804" ry="2.605" id="HJkZVNHBa-X"/>
</g>
</g>
</g>
<g id="r1gbN4SBa-7">
<g id="Bk-Z44SrTZm">
<polygon points="143.315,320.533 122.864,332.658 122.864,307.313 143.315,295.213 " id="Skzb4NBHaWX"/>
<polygon points="122.864,332.658 83.113,319.983 83.113,294.635 122.864,307.313 " id="BJQ-4NHS6-Q"/>
<polygon points="122.864,307.313 83.113,294.635 103.564,282.534 143.315,295.213 " id="HyE-V4HS6Wm"/>
</g>
<g id="ByrZE4SrpZX">
<rect x="92.056" y="291.152" width="11.608" height="3.49" id="rkIZNVBS6-X"/>
<g id="ryDW4EBrpZ7">
<ellipse cx="97.86" cy="294.644" rx="5.804" ry="2.606" id="S1_ZEEHSab7"/>
<ellipse cx="97.86" cy="291.153" rx="5.804" ry="2.606" id="BJK-N4SrTbQ"/>
</g>
</g>
<g id="Hy9-4NSr6bQ">
<rect x="102.499" y="284.624" width="11.608" height="3.489" id="HJjZNVBr6ZX"/>
<g id="Sy2WNESrpWX">
<ellipse cx="108.303" cy="288.114" rx="5.804" ry="2.605" id="SJaZNESHaZQ"/>
<ellipse cx="108.303" cy="284.624" rx="5.804" ry="2.604" id="HJ0ZVEHrTZX"/>
</g>
</g>
<g id="HkyfEVrBTZQ">
<rect x="113.272" y="298.092" width="11.608" height="3.491" id="HJezNNHHp-X"/>
<g id="H1ZGE4HSTZQ">
<ellipse cx="119.076" cy="301.583" rx="5.804" ry="2.604" id="SJzf4NBr6bX"/>
<ellipse cx="119.076" cy="298.092" rx="5.804" ry="2.606" id="S1mz4NSHaWX"/>
</g>
</g>
<g id="BkVf4Vrr6Wm">
<rect x="123.332" y="292.014" width="11.608" height="3.491" id="BySfV4rSTZQ"/>
<g id="B1IM44HS6-X">
<ellipse cx="129.136" cy="295.505" rx="5.804" ry="2.604" id="HkPG44BrTWm"/>
<ellipse cx="129.136" cy="292.014" rx="5.804" ry="2.606" id="S1OGENBSpWX"/>
</g>
</g>
</g>
<g id="BJKfVErSaZ7_B1XM8SpZm" data-animator-group="true" data-animator-type="0">
<g id="BJKfVErSaZ7">
<g id="HkcGNEHBTb7">
<polygon points="123.024,288.641 102.574,300.766 102.574,275.42 123.024,263.318 " id="BJjf4ESrT-X"/>
<polygon points="102.574,300.766 62.822,288.09 62.822,262.741 102.574,275.42 " id="B12MNVHB6b7"/>
<polygon points="102.574,275.42 62.822,262.741 83.274,250.641 123.024,263.318 " id="rkpfNNrHT-Q"/>
</g>
<g id="ByRzE4SH6bm">
<rect x="71.766" y="259.26" width="11.608" height="3.49" id="BkyXVVrr6WQ"/>
<g id="BJlmNEHSa-X">
<ellipse cx="77.57" cy="262.75" rx="5.804" ry="2.605" id="SkZQEEHHa-7"/>
<ellipse cx="77.57" cy="259.26" rx="5.804" ry="2.605" id="BJfQ4NBSa-m"/>
</g>
</g>
<g id="By7XE4SH6-7">
<rect x="82.208" y="252.73" width="11.608" height="3.49" id="ByNm4VBS6WX"/>
<g id="SkBmVESH6-7">
<ellipse cx="88.012" cy="256.221" rx="5.804" ry="2.605" id="r1IXENrSaZm"/>
<ellipse cx="88.012" cy="252.73" rx="5.804" ry="2.605" id="S1v744HHTWX"/>
</g>
</g>
<g id="SydXE4BSa-7">
<rect x="92.981" y="266.198" width="11.608" height="3.491" id="r1Km44rS6Zm"/>
<g id="Sk97VVHHa-X">
<ellipse cx="98.786" cy="269.689" rx="5.804" ry="2.605" id="SyjQ4NrHTb7"/>
<ellipse cx="98.786" cy="266.198" rx="5.804" ry="2.606" id="S13XN4BHab7"/>
</g>
</g>
<g id="B1a74EBB6bm">
<rect x="103.042" y="260.12" width="11.608" height="3.491" id="BJR7V4rr6WX"/>
<g id="rk1VVEBrpbQ">
<ellipse cx="108.846" cy="263.611" rx="5.804" ry="2.605" id="rkeN44HrTWQ"/>
<ellipse cx="108.846" cy="260.12" rx="5.804" ry="2.606" id="r1ZE4NHH6W7"/>
</g>
</g>
</g>
</g>
<g id="BkGVNVSB6-Q_rJYXOUH6-X" data-animator-group="true" data-animator-type="0">
<g id="BkGVNVSB6-Q">
<g id="HJQNV4Hra-7">
<polygon points="123.024,263.714 102.574,275.839 102.574,250.495 123.024,238.394 " id="B1VNN4rH6-Q"/>
<polygon points="102.574,275.839 62.822,263.164 62.822,237.815 102.574,250.495 " id="HJBNE4SrpZm"/>
<polygon points="102.574,250.495 62.822,237.815 83.274,225.715 123.024,238.394 " id="SJLEV4BBaZ7"/>
</g>
<g id="ByDVVEBHTWX">
<rect x="71.766" y="234.334" width="11.608" height="3.491" id="HJ_N4VSHpWX"/>
<g id="BJKNNVrrT-m">
<ellipse cx="77.57" cy="237.825" rx="5.804" ry="2.606" id="BJ5ENEHrT-X"/>
<ellipse cx="77.57" cy="234.334" rx="5.804" ry="2.606" id="SkjNNESSab7"/>
</g>
</g>
<g id="SJhE4NSS6bQ">
<rect x="82.208" y="227.805" width="11.608" height="3.49" id="r1T44VHS6bm"/>
<g id="SyRN44HHTWQ">
<ellipse cx="88.012" cy="231.295" rx="5.804" ry="2.606" id="BJkrNVSHT-m"/>
<ellipse cx="88.012" cy="227.805" rx="5.804" ry="2.606" id="S1eBEVSS6bX"/>
</g>
</g>
<g id="rkbrNVHr6b7">
<rect x="92.981" y="241.273" width="11.608" height="3.491" id="SJGrVVSH6-X"/>
<g id="BJXrNVrHpbQ">
<ellipse cx="98.786" cy="244.764" rx="5.804" ry="2.606" id="r1VHVVrSabX"/>
<ellipse cx="98.786" cy="241.273" rx="5.804" ry="2.606" id="HkrrENBrpbm"/>
</g>
</g>
<g id="ByIHE4HS6-7">
<rect x="103.042" y="235.195" width="11.608" height="3.491" id="BJPHV4rHTbX"/>
<g id="BJ_BEErrT-X">
<ellipse cx="108.846" cy="238.686" rx="5.804" ry="2.606" id="r1YHENrBpbQ"/>
<ellipse cx="108.846" cy="235.195" rx="5.804" ry="2.606" id="SJ9SN4Sr6Wm"/>
</g>
</g>
</g>
</g>
<g id="SysBVNBBTZm_SJpBwST-X" data-animator-group="true" data-animator-type="0">
<g id="SysBVNBBTZm">
<g id="HknB44HSaWX">
<polygon points="123.054,238.428 102.603,250.553 102.603,225.208 123.054,213.108 " id="SkTrEVSHTWm"/>
<polygon points="102.603,250.553 62.852,237.878 62.852,212.529 102.603,225.208 " id="SJCSVEBrp-Q"/>
<polygon points="102.603,225.208 62.852,212.529 83.303,200.429 123.054,213.108 " id="r11LVESHpb7"/>
</g>
<g id="ryeINNHrTZm">
<rect x="71.795" y="209.048" width="11.608" height="3.491" id="Bkb8EVrSpb7"/>
<g id="Byz8N4SHpZm">
<ellipse cx="77.599" cy="212.539" rx="5.804" ry="2.606" id="SkXLVNHHTWX"/>
<ellipse cx="77.599" cy="209.048" rx="5.804" ry="2.606" id="BkEL44BraWX"/>
</g>
</g>
<g id="rkHLEVSSa-7">
<rect x="82.237" y="202.519" width="11.608" height="3.49" id="BkIUN4BH6Z7"/>
<g id="BJPLV4rST-m">
<ellipse cx="88.042" cy="206.009" rx="5.804" ry="2.606" id="r1dIVEBr6ZX"/>
<ellipse cx="88.042" cy="202.519" rx="5.804" ry="2.606" id="ryt8V4Br6WX"/>
</g>
</g>
<g id="rJ9UE4HH6-7">
<rect x="93.011" y="215.987" width="11.608" height="3.491" id="BkiIVNBSaZQ"/>
<g id="Sy2UVVBHTZQ">
<ellipse cx="98.815" cy="219.478" rx="5.804" ry="2.606" id="rk6LNVBBaW7"/>
<ellipse cx="98.815" cy="215.987" rx="5.804" ry="2.606" id="r1RLVVrBT-m"/>
</g>
</g>
<g id="HJyvVNBH6ZQ">
<rect x="103.071" y="209.909" width="11.608" height="3.491" id="rklvNEBSab7"/>
<g id="By-P44rH6-m">
<ellipse cx="108.875" cy="213.399" rx="5.804" ry="2.606" id="HyGvEESBT-7"/>
<ellipse cx="108.875" cy="209.909" rx="5.804" ry="2.606" id="r17vEVrSTbX"/>
</g>
</g>
</g>
</g>
<g id="H1Ew4NBra-m_HJ8twBa-X" data-animator-group="true" data-animator-type="0">
<g id="H1Ew4NBra-m">
<g id="B1HwNVSrp-Q">
<polygon points="123.112,213.108 102.661,225.232 102.661,199.889 123.112,187.788 " id="HyIDE4HBaZQ"/>
<polygon points="102.661,225.232 62.91,212.558 62.91,187.209 102.661,199.889 " id="SywD4NHHT-m"/>
<polygon points="102.661,199.889 62.91,187.209 83.361,175.108 123.112,187.788 " id="B1uvNNHHaZX"/>
</g>
<g id="r1KPV4rB6bX">
<rect x="71.854" y="183.728" width="11.608" height="3.491" id="SycDE4rB6ZX"/>
<g id="HyoDENSrT-Q">
<ellipse cx="77.658" cy="187.219" rx="5.804" ry="2.606" id="Synv4VrBTb7"/>
<ellipse cx="77.658" cy="183.728" rx="5.804" ry="2.606" id="r1aDVEBr6bm"/>
</g>
</g>
<g id="rkRPE4SH6WX">
<rect x="82.296" y="177.199" width="11.608" height="3.49" id="H1k_N4SrpWm"/>
<g id="Hyg_E4HraZ7">
<ellipse cx="88.1" cy="180.689" rx="5.804" ry="2.606" id="BJbOE4SB6-Q"/>
<ellipse cx="88.1" cy="177.199" rx="5.804" ry="2.605" id="S1GuENrST-7"/>
</g>
</g>
<g id="S1XuNEHra-7">
<rect x="93.069" y="190.667" width="11.608" height="3.491" id="HJ4_4VSraZQ"/>
<g id="HySdNErHTb7">
<ellipse cx="98.874" cy="194.158" rx="5.804" ry="2.605" id="BJIuN4Hrp-Q"/>
<ellipse cx="98.874" cy="190.667" rx="5.804" ry="2.606" id="H1DuNErH6bQ"/>
</g>
</g>
<g id="Hy__44rHaWm">
<rect x="103.129" y="184.589" width="11.608" height="3.49" id="SyYO4EHSTbX"/>
<g id="Hy5d4NHBT-Q">
<ellipse cx="108.933" cy="188.079" rx="5.804" ry="2.606" id="HkidEEHSaWQ"/>
<ellipse cx="108.933" cy="184.589" rx="5.804" ry="2.606" id="BJ2dN4HSa-7"/>
</g>
</g>
</g>
</g>
<g id="BJpuNEBHpZQ_SJ43PH6W7" data-animator-group="true" data-animator-type="0">
<g id="BJpuNEBHpZQ">
<g id="BJRuV4BH6b7">
<polygon points="123.112,187.754 102.661,199.879 102.661,174.535 123.112,162.434 " id="ByJKENBST-X"/>
<polygon points="102.661,199.879 62.91,187.204 62.91,161.855 102.661,174.535 " id="BJeYVVSHa-Q"/>
<polygon points="102.661,174.535 62.91,161.855 83.361,149.755 123.112,162.434 " id="BkWtVVHBTbQ"/>
</g>
<g id="B1Mt4VHra-7">
<rect x="71.854" y="158.374" width="11.608" height="3.491" id="r17K4VrS6-7"/>
<g id="B1EKEVBBTbX">
<ellipse cx="77.658" cy="161.865" rx="5.804" ry="2.606" id="ryrFNNSr6Z7"/>
<ellipse cx="77.658" cy="158.374" rx="5.804" ry="2.606" id="HJItV4Hra-X"/>
</g>
</g>
<g id="HywFV4BBTZX">
<rect x="82.296" y="151.845" width="11.608" height="3.49" id="SkutENSS6Z7"/>
<g id="HyFt4VBBpZ7">
<ellipse cx="88.1" cy="155.335" rx="5.804" ry="2.606" id="BycFV4BHaZ7"/>
<ellipse cx="88.1" cy="151.845" rx="5.804" ry="2.606" id="HyitN4rHpZQ"/>
</g>
</g>
<g id="S1ntN4HSpZ7">
<rect x="93.069" y="165.313" width="11.608" height="3.491" id="BJTKVVrHTZQ"/>
<g id="BJ0tEErSpbX">
<ellipse cx="98.874" cy="168.804" rx="5.804" ry="2.606" id="Hkyq44BSabm"/>
<ellipse cx="98.874" cy="165.313" rx="5.804" ry="2.606" id="H1gqNNBS6W7"/>
</g>
</g>
<g id="Sk-qN4SHab7">
<rect x="103.129" y="159.235" width="11.608" height="3.491" id="HkzcENSSp-Q"/>
<g id="HkQc4VSr6-Q">
<ellipse cx="108.933" cy="162.726" rx="5.804" ry="2.606" id="BJV5VNHBp-7"/>
<ellipse cx="108.933" cy="159.235" rx="5.804" ry="2.606" id="HJH5EEBST-Q"/>
</g>
</g>
</g>
</g>
<g id="ByUcENHSpZ7_SkYkdHT-7" data-animator-group="true" data-animator-type="0">
<g id="ByUcENHSpZ7">
<g id="rJDqVNHr6WX">
<polygon points="123.112,162.434 102.661,174.559 102.661,149.215 123.112,137.114 " id="ryu5VEHSTbX"/>
<polygon points="102.661,174.559 62.91,161.884 62.91,136.536 102.661,149.215 " id="BkF9V4BHabm"/>
<polygon points="102.661,149.215 62.91,136.536 83.361,124.435 123.112,137.114 " id="ry594VBBpWX"/>
</g>
<g id="B1sqN4rHTWX">
<rect x="71.854" y="133.054" width="11.608" height="3.491" id="B12q44BraZX"/>
<g id="SJTqVVHHTbX">
<ellipse cx="77.658" cy="136.545" rx="5.804" ry="2.606" id="BkRcNVrBTbm"/>
<ellipse cx="77.658" cy="133.054" rx="5.804" ry="2.606" id="ryyiVErrpbQ"/>
</g>
</g>
<g id="SklsVNSHTb7">
<rect x="82.296" y="126.524" width="11.608" height="3.491" id="r1-s44rrT-X"/>
<g id="Syfj44SHT-Q">
<ellipse cx="88.1" cy="130.015" rx="5.804" ry="2.606" id="r1XsENHHp-m"/>
<ellipse cx="88.1" cy="126.524" rx="5.804" ry="2.606" id="Hy4oE4BHT-7"/>
</g>
</g>
<g id="H1BoN4HB6W7">
<rect x="93.069" y="139.993" width="11.608" height="3.49" id="rk8oENrST-m"/>
<g id="SyDsV4rrpW7">
<ellipse cx="98.874" cy="143.483" rx="5.804" ry="2.606" id="r1_jV4rSpZ7"/>
<ellipse cx="98.874" cy="139.993" rx="5.804" ry="2.606" id="SJKoEESr6b7"/>
</g>
</g>
<g id="Skci4EHBp-m">
<rect x="103.129" y="133.915" width="11.608" height="3.49" id="rkoi44HBTZm"/>
<g id="rynsV4HSTZ7">
<ellipse cx="108.933" cy="137.405" rx="5.804" ry="2.606" id="Byps4VrSaZ7"/>
<ellipse cx="108.933" cy="133.915" rx="5.804" ry="2.606" id="SkCjNEBST-7"/>
</g>
</g>
</g>
</g>
<g id="HkJ3NVrB6-m_Hy4fuHTb7" data-animator-group="true" data-animator-type="0">
<g id="HkJ3NVrB6-m">
<g id="SJg244BraW7">
<polygon points="105,131.264 84.549,143.389 84.549,118.044 105,105.944 " id="B1WhE4rSaW7"/>
<polygon points="84.549,143.389 44.797,130.714 44.797,105.366 84.549,118.044 " id="BJzn4VHrp-7"/>
<polygon points="84.549,118.044 44.797,105.366 65.249,93.265 105,105.944 " id="BJX2V4HBTbQ"/>
</g>
<g id="SyN3NESrabX">
<rect x="53.741" y="101.884" width="11.608" height="3.49" id="SkrhVNBraZQ"/>
<g id="Bk824NSS6b7">
<ellipse cx="59.545" cy="105.375" rx="5.804" ry="2.606" id="S1wnNVrrT-X"/>
<ellipse cx="59.545" cy="101.884" rx="5.804" ry="2.606" id="r1u3NVSHTZX"/>
</g>
</g>
<g id="ryY3NESHpWm">
<rect x="64.183" y="95.354" width="11.608" height="3.491" id="H1c3VVBSaZX"/>
<g id="HJihNEBBT-X">
<ellipse cx="69.987" cy="98.845" rx="5.804" ry="2.606" id="rJn24VSSTb7"/>
<ellipse cx="69.987" cy="95.354" rx="5.804" ry="2.606" id="Hka3EEBrpWm"/>
</g>
</g>
<g id="rJR3VESB6Z7">
<rect x="74.957" y="108.823" width="11.608" height="3.49" id="BJyaVNrSaW7"/>
<g id="SkgTNNrB6WX">
<ellipse cx="80.761" cy="112.313" rx="5.804" ry="2.606" id="Sy-aNNHH6-Q"/>
<ellipse cx="80.761" cy="108.823" rx="5.804" ry="2.605" id="SkzpNNSH6ZX"/>
</g>
</g>
<g id="S1mp4NHHTbX">
<rect x="85.017" y="102.745" width="11.608" height="3.491" id="HyEa44Hr6ZX"/>
<g id="SJr6ENrSabX">
<ellipse cx="90.821" cy="106.235" rx="5.804" ry="2.606" id="S1UaNNBSp-X"/>
<ellipse cx="90.821" cy="102.745" rx="5.804" ry="2.606" id="HJv6N4BH6WX"/>
</g>
</g>
</g>
</g>
<g id="Hy_6VVSBaZX_SJWHuHaW7" data-animator-group="true" data-animator-type="0">
<g id="Hy_6VVSBaZX">
<g id="ByK6VNrSTWm">
<polygon points="144.897,143.981 124.446,156.106 124.446,130.762 144.897,118.662 " id="S1564ErSpb7"/>
<polygon points="124.446,156.106 84.695,143.432 84.695,118.083 124.446,130.762 " id="Skj6NVrBTbm"/>
<polygon points="124.446,130.762 84.695,118.083 105.146,105.982 144.897,118.662 " id="Bk36ENSrpWX"/>
</g>
<g id="Skp6NVBBaW7">
<rect x="93.639" y="114.602" width="11.608" height="3.49" id="SkRaVNHSabQ"/>
<g id="SJk04VSSaZX">
<ellipse cx="99.443" cy="118.092" rx="5.804" ry="2.606" id="SklR4NHBTZm"/>
<ellipse cx="99.443" cy="114.602" rx="5.804" ry="2.606" id="H1WAE4SHp-X"/>
</g>
</g>
<g id="BkzA44BBTZX">
<rect x="104.081" y="108.072" width="11.608" height="3.491" id="ry7R4ESrTWm"/>
<g id="SyN0EEHrT-m">
<ellipse cx="109.885" cy="111.563" rx="5.804" ry="2.606" id="B1HC4NHB6Zm"/>
<ellipse cx="109.885" cy="108.072" rx="5.804" ry="2.606" id="r1LC4VSrabX"/>
</g>
</g>
<g id="H1vRVNSHa-7">
<rect x="114.854" y="121.541" width="11.608" height="3.49" id="rkuAV4SH6Zm"/>
<g id="S1YRVNHrpbQ">
<ellipse cx="120.658" cy="125.031" rx="5.804" ry="2.606" id="Sy5CNVrSaZ7"/>
<ellipse cx="120.658" cy="121.541" rx="5.804" ry="2.605" id="BkiCVVSrpZQ"/>
</g>
</g>
<g id="rk3RNVBr6WX">
<rect x="124.914" y="115.462" width="11.608" height="3.491" id="Bkp0VVSBTW7"/>
<g id="S10RV4rHab7">
<ellipse cx="130.718" cy="118.953" rx="5.804" ry="2.606" id="SJyyxE4rSTW7"/>
<ellipse cx="130.718" cy="115.462" rx="5.804" ry="2.606" id="B1gJxEESSabX"/>
</g>
</g>
</g>
</g>
<g id="SJ-1g44SrTZ7">
<g id="SyMyxVErrpWQ">
<polygon points="183.066,333.159 162.616,345.284 162.616,319.94 183.066,307.839 " id="ryQkl4VHSpWQ"/>
<polygon points="162.616,345.284 122.864,332.609 122.864,307.261 162.616,319.94 " id="ryNyl44Hr6bm"/>
<polygon points="162.616,319.94 122.864,307.261 143.316,295.16 183.066,307.839 " id="rJS1eV4Br6ZX"/>
</g>
<g id="rk81eNNHrpWX">
<rect x="131.808" y="303.779" width="11.608" height="3.489" id="ByvJx4ESS6WX"/>
<g id="H1dJe4ESr6ZX">
<ellipse cx="137.612" cy="307.27" rx="5.804" ry="2.606" id="HJFJeN4HHpZQ"/>
<ellipse cx="137.612" cy="303.779" rx="5.804" ry="2.606" id="ryqyxNNBrTW7"/>
</g>
</g>
<g id="BksJeN4BS6bQ">
<rect x="142.25" y="297.25" width="11.608" height="3.49" id="S131eNVHSTbm"/>
<g id="Ska1gVErH6Zm">
<ellipse cx="148.054" cy="300.74" rx="5.804" ry="2.606" id="SyRkgEEHBa-m"/>
<ellipse cx="148.054" cy="297.25" rx="5.804" ry="2.605" id="S1kxx4NBBp-7"/>
</g>
</g>
<g id="HkeeeN4HHpZm">
<rect x="153.024" y="310.719" width="11.608" height="3.49" id="r1ZlgV4HSp-X"/>
<g id="SyMgeENrBp-m">
<ellipse cx="158.828" cy="314.209" rx="5.804" ry="2.605" id="r1QllEEHBp-m"/>
<ellipse cx="158.828" cy="310.719" rx="5.804" ry="2.605" id="rkVxeVErr6bQ"/>
</g>
</g>
<g id="ByrleVEBHTZQ">
<rect x="163.083" y="304.641" width="11.608" height="3.49" id="S1UxgNNBHaWm"/>
<g id="BkwleNNBBpb7">
<ellipse cx="168.888" cy="308.131" rx="5.804" ry="2.605" id="r1_egEEBrp-m"/>
<ellipse cx="168.888" cy="304.641" rx="5.804" ry="2.605" id="BkFlgENHS6b7"/>
</g>
</g>
</g>
<g id="Hy5glNNBBTb7_rJ-jdSaZm" data-animator-group="true" data-animator-type="0">
<g id="Hy5glNNBBTb7">
<g id="H1sexEVSrT-7">
<polygon points="166.624,126.052 146.173,138.177 146.173,112.833 166.624,100.732 " id="BynleNESHa-X"/>
<polygon points="146.173,138.177 106.421,125.502 106.421,100.154 146.173,112.833 " id="rypxe4NSBaWm"/>
<polygon points="146.173,112.833 106.421,100.154 126.873,88.053 166.624,100.732 " id="HkRxgNErHa-X"/>
</g>
<g id="H1JZg4NHH6bQ">
<rect x="115.365" y="96.672" width="11.608" height="3.49" id="rJgWlEVHrTb7"/>
<g id="SkbWlEEHBp-Q">
<ellipse cx="121.169" cy="100.163" rx="5.804" ry="2.606" id="ryz-xEEHBa-7"/>
<ellipse cx="121.169" cy="96.672" rx="5.804" ry="2.606" id="BJXZxEVBBpZm"/>
</g>
</g>
<g id="B14bgEEHSTbm">
<rect x="125.807" y="90.143" width="11.608" height="3.491" id="SkB-xEESSTW7"/>
<g id="By8blNVrBT-Q">
<ellipse cx="131.611" cy="93.633" rx="5.804" ry="2.606" id="HJPZxEESraZ7"/>
<ellipse cx="131.611" cy="90.143" rx="5.804" ry="2.606" id="r1_bgEVrH6WQ"/>
</g>
</g>
<g id="HJtZg4Erra-7">
<rect x="136.581" y="103.611" width="11.608" height="3.49" id="rJ5WxNESrTbX"/>
This is my HTML:
<svg viewbox="0 0 33.83098862 33.83098862" width="400" height="400"
xmlns="http://www.w3.org/2000/svg">
<circle stroke="#efefef" stroke-width="2"
cx="16.91549431" cy="16.91549431" r="15.91549431" fill="url(#image1)"/>
<g >
<text x="16.91549431" y="15.5" alignment-baseline="central" text-anchor="middle" font-size="3">zzzzzzzzzzzzzzz</text>
<text x="16.91549431" y="17.5" alignment-baseline="central" text-anchor="middle" font-size="2">aaaaaaaaaaaaaaaa</text>
<text x="16.91549431" y="20.5" alignment-baseline="central" text-anchor="middle" font-size="1.5">qqqqqqqqqqqqqqq</text>
</g>
<defs>
<pattern width="10" height="10" patternUnits="userSpaceOnUse" y="0" x="0" id="image1">
<image xlink:href="http://images.clipartpanda.com/clipart-star-RTA9RqzTL.png" height="10" width="10" y="0" x="0"></image>
</pattern>
</defs>
</svg>
And I have got this
I need only one star beneath the qqqqqqqqqq text
The <pattern> element is for defining repeating fill patterns. If you just want to place a single image, just use the <image> element.
<svg viewbox="0 0 33.83098862 33.83098862" width="400" height="400"
xmlns="http://www.w3.org/2000/svg">
<circle stroke="#efefef" stroke-width="2"
cx="16.91549431" cy="16.91549431" r="15.91549431" fill="white"/>
<g >
<text x="16.91549431" y="15.5" alignment-baseline="central" text-anchor="middle" font-size="3">zzzzzzzzzzzzzzz</text>
<text x="16.91549431" y="17.5" alignment-baseline="central" text-anchor="middle" font-size="2">aaaaaaaaaaaaaaaa</text>
<text x="16.91549431" y="20.5" alignment-baseline="central" text-anchor="middle" font-size="1.5">qqqqqqqqqqqqqqq</text>
</g>
<image xlink:href="http://images.clipartpanda.com/clipart-star-RTA9RqzTL.png" height="10" width="10" y="21.5" x="11.9"></image>
</svg>