Adding image to bottom of a svg circle - css

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>

Related

CSS to increase svg font size custom

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>

SVG layer with hole

I have found an SVG layer on the net. There should be a transparent hole in it. But I don't know how to change the colour around the hole from black to e.g. #5BBB74.
<svg viewbox="0 0 100 50" width="100%">
<defs>
<mask id="mask" x="0" y="0" width="80" height="30">
<rect x="0" y="0" width="100" height="40" fill="#fff"/>
<circle cx="50" cy="20" r="10" />
</mask>
</defs>
<rect x="0" y="0" width="100" height="50" mask="url(#mask)" fill-opacity=""/>
</svg>

You can add fill property to the rect affected by the mask.
<svg viewbox="0 0 100 50" width="100%">
<defs>
<mask id="mask" x="0" y="0" width="80" height="30">
<rect x="0" y="0" width="100" height="40" fill="#fff"/>
<circle cx="50" cy="20" r="10" />
</mask>
</defs>
<rect x="0" y="0" width="100" height="50" mask="url(#mask)" fill-opacity="" fill="#5BBB74"/>
</svg>

Problem making SVG shapes responsive on mobile and tablet

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>

SVG Animation rotates in wrong place

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>

How to color odd even for svg rect

I have a bar chart (svg) and need to color bars(rects) with two colors. Is there any way to do it in CSS with odd even?
.chart rect {
fill: steelblue;
}
.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
}
<!DOCTYPE html>
<svg class="chart" width="420" height="120">
<g transform="translate(0,0)">
<rect width="40" height="19"></rect>
<text x="37" y="9.5" dy=".35em">4</text>
</g>
<g transform="translate(0,20)">
<rect width="80" height="19"></rect>
<text x="77" y="9.5" dy=".35em">8</text>
</g>
<g transform="translate(0,40)">
<rect width="150" height="19"></rect>
<text x="147" y="9.5" dy=".35em">15</text>
</g>
<g transform="translate(0,60)">
<rect width="160" height="19"></rect>
<text x="157" y="9.5" dy=".35em">16</text>
</g>
<g transform="translate(0,80)">
<rect width="230" height="19"></rect>
<text x="227" y="9.5" dy=".35em">23</text>
</g>
<g transform="translate(0,100)">
<rect width="420" height="19"></rect>
<text x="417" y="9.5" dy=".35em">42</text>
</g>
</svg>
Any help will be appreciated!

You can use the nth-child selectors like below to apply the styles. Since the rect element is not a direct child of your svg element you cannot apply the nth-child selector directly on it. Instead, we have to select the odd/even g element and then style the rect element inside it accordingly.
.chart g:nth-child(even) rect {
fill: steelblue;
}
.chart g:nth-child(odd) rect {
fill: red;
}
.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
}
<!DOCTYPE html>
<svg class="chart" width="420" height="120">
<g transform="translate(0,0)">
<rect width="40" height="19"></rect>
<text x="37" y="9.5" dy=".35em">4</text>
</g>
<g transform="translate(0,20)">
<rect width="80" height="19"></rect>
<text x="77" y="9.5" dy=".35em">8</text>
</g>
<g transform="translate(0,40)">
<rect width="150" height="19"></rect>
<text x="147" y="9.5" dy=".35em">15</text>
</g>
<g transform="translate(0,60)">
<rect width="160" height="19"></rect>
<text x="157" y="9.5" dy=".35em">16</text>
</g>
<g transform="translate(0,80)">
<rect width="230" height="19"></rect>
<text x="227" y="9.5" dy=".35em">23</text>
</g>
<g transform="translate(0,100)">
<rect width="420" height="19"></rect>
<text x="417" y="9.5" dy=".35em">42</text>
</g>
</svg>

Resources