SVG animate (rotate) all graphics around a center point - css

I have a simple graphic SVG
I would like it to rotate around the center point. It doesn't have to be smooth, just a rotation 90 and back every second.
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 27 27" style="enable-background:new 0 0 27 27;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<rect x="0" width="27" height="27"/>
<rect x="8" y="11" class="st0" width="1" height="5"/>
<rect x="9" y="10" class="st0" width="1" height="1"/>
<rect x="10" y="9" class="st0" width="1" height="1"/>
<rect x="11" y="8" class="st0" width="5" height="1"/>
<rect x="13" y="6" class="st0" width="1" height="1"/>
<rect x="14" y="7" class="st0" width="1" height="1"/>
<rect x="14" y="9" class="st0" width="1" height="1"/>
<rect x="13" y="10" class="st0" width="1" height="1"/>
<rect x="18" y="11" class="st0" width="1" height="5"/>
<rect x="17" y="16" class="st0" width="1" height="1"/>
<rect x="16" y="17" class="st0" width="1" height="1"/>
<rect x="11" y="18" class="st0" width="5" height="1"/>
<rect x="12" y="17" class="st0" width="1" height="1"/>
<rect x="13" y="16" class="st0" width="1" height="1"/>
<rect x="12" y="19" class="st0" width="1" height="1"/>
<rect x="13" y="20" class="st0" width="1" height="1"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Is there an animation where I can rotate these SVG graphics around the center point?


You can just use animateTransform:
.st0 {
fill: white;
}
<svg>
<g>
<animateTransform
attributeName="transform"
type="rotate"
values="0 14 14; 90 14 14; 0 14 14"
dur="1s"
repeatCount="indefinite" />
<rect x="0" width="27" height="27"/>
<rect x="8" y="11" class="st0" width="1" height="5"/>
<rect x="9" y="10" class="st0" width="1" height="1"/>
<rect x="10" y="9" class="st0" width="1" height="1"/>
<rect x="11" y="8" class="st0" width="5" height="1"/>
<rect x="13" y="6" class="st0" width="1" height="1"/>
<rect x="14" y="7" class="st0" width="1" height="1"/>
<rect x="14" y="9" class="st0" width="1" height="1"/>
<rect x="13" y="10" class="st0" width="1" height="1"/>
<rect x="18" y="11" class="st0" width="1" height="5"/>
<rect x="17" y="16" class="st0" width="1" height="1"/>
<rect x="16" y="17" class="st0" width="1" height="1"/>
<rect x="11" y="18" class="st0" width="5" height="1"/>
<rect x="12" y="17" class="st0" width="1" height="1"/>
<rect x="13" y="16" class="st0" width="1" height="1"/>
<rect x="12" y="19" class="st0" width="1" height="1"/>
<rect x="13" y="20" class="st0" width="1" height="1"/>
</g>
</svg>

Related

identify selector by index

I want to use the robot framework to automate the user action to hover on bar chart.
Is there a way to identify the bar chart by index?
or what should be the selector for me to use the robot framework to hover on the first bar chart?
I could not find a unique element when inspecting the chart.
outerHTML
<div class="recharts-responsive-container" width="1557" height="150" style="outline: green dotted 2px !important;">
<div class="recharts-wrapper" style="position: relative; cursor: default; width: 1557px; height: 150px;">
<svg class="recharts-surface" width="1557" height="150" viewBox="0 0 1557 150" version="1.1" style="">
<defs>
<clipPath id="recharts3-clip" style="">
<rect x="80" y="0" height="100" width="1457"></rect>
</clipPath>
</defs>
<g class="recharts-layer recharts-bar">
<g class="recharts-layer recharts-bar-rectangles">
<g class="recharts-layer">
<g class="recharts-layer recharts-bar-rectangle" style="">
<path width="233" height="5" x="109.14" y="95" cursor="pointer" fill="rgba(191, 60, 175, 0.7)" stroke="rgba(191, 60, 175, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 109.14,95 h 233 v 5 h -233 Z" style=""></path>
</g>
<g class="recharts-layer recharts-bar-rectangle" style="">
<path width="233" height="6.818181818181813" x="400.53999999999996" y="93.18181818181819" cursor="pointer" fill="rgba(254, 75, 131, 0.7)" stroke="rgba(254, 75, 131, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 400.53999999999996,93.18181818181819 h 233 v 6.818181818181813 h -233 Z"></path>
</g>
<g class="recharts-layer recharts-bar-rectangle">
<path width="233" height="19.545454545454547" x="691.9399999999999" y="80.45454545454545" cursor="pointer" fill="rgba(255, 120, 71, 0.7)" stroke="rgba(255, 120, 71, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 691.9399999999999,80.45454545454545 h 233 v 19.545454545454547 h -233 Z"></path>
</g>
<g class="recharts-layer recharts-bar-rectangle">
<path width="233" height="17.72727272727272" x="983.3399999999999" y="82.27272727272728" cursor="pointer" fill="rgba(226, 183, 47, 0.7)" stroke="rgba(226, 183, 47, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 983.3399999999999,82.27272727272728 h 233 v 17.72727272727272 h -233 Z"></path>
</g>
<g class="recharts-layer recharts-bar-rectangle">
<path width="233" height="92.27272727272728" x="1274.74" y="7.7272727272727195" cursor="pointer" fill="rgba(175, 240, 91, 0.7)" stroke="rgba(175, 240, 91, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 1274.74,7.7272727272727195 h 233 v 92.27272727272728 h -233 Z"></path>
</g>
</g>
</g>
</g>
<g class="recharts-cartesian-grid">
<g class="recharts-cartesian-grid-horizontal">
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="100" x2="1537" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="50" x2="1537" y2="50"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="0" x2="1537" y2="0"></line>
</g>
<g class="recharts-cartesian-grid-vertical">
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="225.7" y1="0" x2="225.7" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="517.0999999999999" y1="0" x2="517.0999999999999" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="808.5" y1="0" x2="808.5" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="1099.8999999999999" y1="0" x2="1099.8999999999999" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="1391.3" y1="0" x2="1391.3" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="0" x2="80" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="1537" y1="0" x2="1537" y2="100"></line>
</g>
</g>
<g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="80" y1="100" x2="1537" y2="100" style=""></line>
<g class="recharts-cartesian-axis-ticks">
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="225.7" y1="106" x2="225.7" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="225.7" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="225.7" dy="0.71em">0.00-0.20</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="517.0999999999999" y1="106" x2="517.0999999999999" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="517.0999999999999" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="517.0999999999999" dy="0.71em">0.20-0.40</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="808.5" y1="106" x2="808.5" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="808.5" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="808.5" dy="0.71em">0.40-0.60</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="1099.8999999999999" y1="106" x2="1099.8999999999999" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="1099.8999999999999" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="1099.8999999999999" dy="0.71em">0.60-0.80</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="1391.3" y1="106" x2="1391.3" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="1391.3" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="1391.3" dy="0.71em">0.80-1.00</tspan>
</text>
</g>
</g>
<text offset="5" x="808.5" y="135" class="recharts-text recharts-label" text-anchor="middle">
<tspan x="808.5" dy="0.71em">Range of Word Confidence Scores</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis" style="">
<line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="80" y1="0" x2="80" y2="100"></line>
<g class="recharts-cartesian-axis-ticks">
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="74" y1="100" x2="80" y2="100"></line>
<text orientation="left" width="60" height="100" type="number" x="72" y="100" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
<tspan x="72" dy="0.355em">0</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="74" y1="50" x2="80" y2="50"></line>
<text orientation="left" width="60" height="100" type="number" x="72" y="50" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
<tspan x="72" dy="0.355em">110</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="74" y1="0" x2="80" y2="0"></line>
<text orientation="left" width="60" height="100" type="number" x="72" y="11" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
<tspan x="72" dy="0.355em">220</tspan>
</text>
</g>
</g>
<text x="-100" y="40" width="100" transform="rotate(-90)" class="recharts-text" text-anchor="start">
<tspan x="-100" dy="-2em">Count of Word</tspan>
<tspan x="-100" dy="1em">Confidence</tspan>
<tspan x="-100" dy="1em">Scores</tspan>
</text>
</g>
</svg>
<div class="recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-top" style="pointer-events: none; visibility: hidden; position: absolute; top: 0px; left: 0px; transform: translate(235.7px, 32px);">
<div class="recharts-default-tooltip" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;">
<p class="recharts-tooltip-label" style="">0.00-0.20</p>
</div>
</div>
</div>
</div>

The first bar of the five can be selected in CSS by:
.recharts-layer.recharts-bar-rectangle:first-child:hover
To demonstrate this, this snippet changes the path's fill color to blue on hover of the bar.
.recharts-layer.recharts-bar-rectangle:first-child:hover path {
fill: blue;
}
<div class="recharts-responsive-container" width="1557" height="150" style="outline: green dotted 2px !important;">
<div class="recharts-wrapper" style="position: relative; cursor: default; width: 1557px; height: 150px;">
<svg class="recharts-surface" width="1557" height="150" viewBox="0 0 1557 150" version="1.1" style="">
<defs>
<clipPath id="recharts3-clip" style="">
<rect x="80" y="0" height="100" width="1457"></rect>
</clipPath>
</defs>
<g class="recharts-layer recharts-bar">
<g class="recharts-layer recharts-bar-rectangles">
<g class="recharts-layer">
<g class="recharts-layer recharts-bar-rectangle" style="">
<path width="233" height="5" x="109.14" y="95" cursor="pointer" fill="rgba(191, 60, 175, 0.7)" stroke="rgba(191, 60, 175, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 109.14,95 h 233 v 5 h -233 Z" style=""></path>
</g>
<g class="recharts-layer recharts-bar-rectangle" style="">
<path width="233" height="6.818181818181813" x="400.53999999999996" y="93.18181818181819" cursor="pointer" fill="rgba(254, 75, 131, 0.7)" stroke="rgba(254, 75, 131, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 400.53999999999996,93.18181818181819 h 233 v 6.818181818181813 h -233 Z"></path>
</g>
<g class="recharts-layer recharts-bar-rectangle">
<path width="233" height="19.545454545454547" x="691.9399999999999" y="80.45454545454545" cursor="pointer" fill="rgba(255, 120, 71, 0.7)" stroke="rgba(255, 120, 71, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 691.9399999999999,80.45454545454545 h 233 v 19.545454545454547 h -233 Z"></path>
</g>
<g class="recharts-layer recharts-bar-rectangle">
<path width="233" height="17.72727272727272" x="983.3399999999999" y="82.27272727272728" cursor="pointer" fill="rgba(226, 183, 47, 0.7)" stroke="rgba(226, 183, 47, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 983.3399999999999,82.27272727272728 h 233 v 17.72727272727272 h -233 Z"></path>
</g>
<g class="recharts-layer recharts-bar-rectangle">
<path width="233" height="92.27272727272728" x="1274.74" y="7.7272727272727195" cursor="pointer" fill="rgba(175, 240, 91, 0.7)" stroke="rgba(175, 240, 91, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 1274.74,7.7272727272727195 h 233 v 92.27272727272728 h -233 Z"></path>
</g>
</g>
</g>
</g>
<g class="recharts-cartesian-grid">
<g class="recharts-cartesian-grid-horizontal">
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="100" x2="1537" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="50" x2="1537" y2="50"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="0" x2="1537" y2="0"></line>
</g>
<g class="recharts-cartesian-grid-vertical">
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="225.7" y1="0" x2="225.7" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="517.0999999999999" y1="0" x2="517.0999999999999" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="808.5" y1="0" x2="808.5" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="1099.8999999999999" y1="0" x2="1099.8999999999999" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="1391.3" y1="0" x2="1391.3" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="0" x2="80" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="1537" y1="0" x2="1537" y2="100"></line>
</g>
</g>
<g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="80" y1="100" x2="1537" y2="100" style=""></line>
<g class="recharts-cartesian-axis-ticks">
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="225.7" y1="106" x2="225.7" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="225.7" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="225.7" dy="0.71em">0.00-0.20</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="517.0999999999999" y1="106" x2="517.0999999999999" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="517.0999999999999" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="517.0999999999999" dy="0.71em">0.20-0.40</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="808.5" y1="106" x2="808.5" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="808.5" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="808.5" dy="0.71em">0.40-0.60</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="1099.8999999999999" y1="106" x2="1099.8999999999999" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="1099.8999999999999" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="1099.8999999999999" dy="0.71em">0.60-0.80</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="1391.3" y1="106" x2="1391.3" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="1391.3" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="1391.3" dy="0.71em">0.80-1.00</tspan>
</text>
</g>
</g>
<text offset="5" x="808.5" y="135" class="recharts-text recharts-label" text-anchor="middle">
<tspan x="808.5" dy="0.71em">Range of Word Confidence Scores</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis" style="">
<line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="80" y1="0" x2="80" y2="100"></line>
<g class="recharts-cartesian-axis-ticks">
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="74" y1="100" x2="80" y2="100"></line>
<text orientation="left" width="60" height="100" type="number" x="72" y="100" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
<tspan x="72" dy="0.355em">0</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="74" y1="50" x2="80" y2="50"></line>
<text orientation="left" width="60" height="100" type="number" x="72" y="50" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
<tspan x="72" dy="0.355em">110</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="74" y1="0" x2="80" y2="0"></line>
<text orientation="left" width="60" height="100" type="number" x="72" y="11" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
<tspan x="72" dy="0.355em">220</tspan>
</text>
</g>
</g>
<text x="-100" y="40" width="100" transform="rotate(-90)" class="recharts-text" text-anchor="start">
<tspan x="-100" dy="-2em">Count of Word</tspan>
<tspan x="-100" dy="1em">Confidence</tspan>
<tspan x="-100" dy="1em">Scores</tspan>
</text>
</g>
</svg>
<div class="recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-top" style="pointer-events: none; visibility: hidden; position: absolute; top: 0px; left: 0px; transform: translate(235.7px, 32px);">
<div class="recharts-default-tooltip" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;">
<p class="recharts-tooltip-label" style="">0.00-0.20</p>
</div>
</div>
</div>
</div>
You can of course add even more selectivity by adding more ancestors' classes.

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>

How can I rotate a symbol around its center without specifying its position twice?

I have some tile symbols that I would like to place on a grid. This is what I'm trying to achieve:
Use tile coordinates to position the symbols (e.g. 4,2 instead of 85,43)
Use pixel coordinates (not tile coordinates) for defining the vertices of symbols
Rotate symbols around their center without specifying absolute coordinates.
I have solutions to the first two (there might be better solutions though) but not the third. I can rotate the tile at 4,2 by a quarter turn with this:
<!-- 10/21 = 0.47619047619 -->
<use x="4" y="2" href="#rooftop-0" class="theme-0" transform="rotate(90 4.476 2.476)" />
I really don't like having to specify the tile coordinates twice. Ideally, I would like to write something like this instead:
<use x="4" y="2" href="#rooftop-0" class="theme-0 rotate-1" />
Defining .rotate-1 in the stylesheet doesn't seem to have any effect on the rotation. transform-origin="50% 50%" seems to be setting the origin to 50% of the viewport or something. Maybe defining the symbol with coordinates from -10 to 10 instead of 0 to 20 would help? Should I define the viewBox of the symbols?
Another solution would be manually changing the coordinates of the vertices in the symbol to create the other 3 orientations. I'd rather not!
Anyway, this is what I have so far:
<?xml version="1.0" standalone="no"?>
<!-- 21*10+1 = 211 -->
<svg width="211" height="211" version="2.0" xmlns="http://www.w3.org/2000/svg">
<style>
.grid-line {
fill: #DDD;
}
.grass-fill {
fill: #8C8;
}
.tile {
/* 1/21 = 0.04761904761 */
transform: scale(0.04761904761, 0.04761904761);
}
.theme-0 {
--roof-color-0: #F44;
--roof-color-1: #F66;
--roof-color-2: #F88;
--roof-color-3: #FAA;
}
.theme-1 {
--roof-color-0: #44F;
--roof-color-1: #66F;
--roof-color-2: #88F;
--roof-color-3: #AAF;
}
</style>
<defs>
<pattern id="grid" width="21" height="21" patternUnits="userSpaceOnUse">
<rect class="grid-line" x="0" y="0" width="1" height="21" />
<rect class="grid-line" x="0" y="0" width="21" height="1" />
</pattern>
<symbol id="rooftop-0">
<g class="tile">
<rect class="grass-fill" width="20" height="20" />
<polygon style="fill: var(--roof-color-0)" points="3,2 17,2 18,8 2,8" />
<polygon style="fill: var(--roof-color-1)" points="2,8 18,8 17,14 3,14" />
<polygon style="fill: var(--roof-color-2)" points="8,8 11,14 11,18 8,18" />
<polygon style="fill: var(--roof-color-3)" points="8,8 8,18 5,18 5,14" />
</g>
</symbol>
<symbol id="rooftop-1">
<g class="tile">
<rect class="grass-fill" width="20" height="20" />
<polygon style="fill: var(--roof-color-0)" points="2,11 18,11 17,17 3,17" />
<polygon style="fill: var(--roof-color-1)" points="3,5 17,5 18,11 2,11" />
<polygon style="fill: var(--roof-color-2)" points="10,11 10,3 13,3 13,5" />
<polygon style="fill: var(--roof-color-3)" points="10,11 7,5 7,3 10,3" />
</g>
</symbol>
</defs>
<g>
<rect fill="#999" width="100%" height="100%" />
<rect fill="url(#grid)" width="100%" height="100%" />
</g>
<g transform="translate(1, 1) scale(21, 21)">
<use x="3" y="2" href="#rooftop-0" class="theme-1" />
<!-- 10/21 = 0.47619047619 -->
<use x="4" y="2" href="#rooftop-0" class="theme-0" transform="rotate(90 4.476 2.476)" />
<use x="5" y="2" href="#rooftop-1" class="theme-1" />
</g>
</svg>
Here's a screenshot:
Is there a clean way of doing what I'm trying to do? Rotating a symbol around its center seems like something one would do all the time.

Instead of setting your <use> attributes using xand y coordinates, you can set them using transform="translate(x, y), this way, the origin parameters of the rotate() method will stay the same (0.5, 0.5):
<svg viewBox="0 0 211 211">
<style>
.grid-line {
fill: #DDD;
}
.grass-fill {
fill: #8C8;
}
.theme-0 {
--roof-color-0: #F44;
--roof-color-1: #F66;
--roof-color-2: #F88;
--roof-color-3: #FAA;
}
.theme-1 {
--roof-color-0: #44F;
--roof-color-1: #66F;
--roof-color-2: #88F;
--roof-color-3: #AAF;
}
</style>
<defs>
<pattern id="grid" x="-0.5" y="-0.5" width="20" height="20" patternUnits="userSpaceOnUse">
<rect class="grid-line" x="0" y="0" width="1" height="20" />
<rect class="grid-line" x="0" y="0" width="20" height="1" />
</pattern>
<symbol id="rooftop-0" viewBox="0 0 20 20">
<g class="tile" transform="translate(0.5, 0.5) scale(0.95)">
<rect class="grass-fill" width="20" height="20" />
<polygon style="fill: var(--roof-color-0)" points="3,2 17,2 18,8 2,8" />
<polygon style="fill: var(--roof-color-1)" points="2,8 18,8 17,14 3,14" />
<polygon style="fill: var(--roof-color-2)" points="8,8 11,14 11,18 8,18" />
<polygon style="fill: var(--roof-color-3)" points="8,8 8,18 5,18 5,14" />
</g>
</symbol>
<symbol id="rooftop-1" viewBox="0 0 20 20">
<g class="tile"transform="translate(0.5, 0.5) scale(0.95)">
<rect class="grass-fill" width="20" height="20" />
<polygon style="fill: var(--roof-color-0)" points="2,11 18,11 17,17 3,17" />
<polygon style="fill: var(--roof-color-1)" points="3,5 17,5 18,11 2,11" />
<polygon style="fill: var(--roof-color-2)" points="10,11 10,3 13,3 13,5" />
<polygon style="fill: var(--roof-color-3)" points="10,11 7,5 7,3 10,3" />
</g>
</symbol>
</defs>
<g>
<rect fill="#999" width="100%" height="100%" />
<rect fill="url(#grid)" width="100%" height="100%" />
</g>
<g transform="scale(20, 20)">
<use xlink:href="#rooftop-0" class="theme-1" width="1" height="1" transform="translate(4, 2) rotate(0,0.5,0.5)"/>
<use xlink:href="#rooftop-1" class="theme-0" width="1" height="1" transform="translate(5, 2) rotate(90,0.5,0.5)"/>
<use xlink:href="#rooftop-0" class="theme-1" width="1" height="1" transform="translate(6, 2) rotate(180,0.5,0.5)"/>
</g>
</svg>

I hope this is what you were asking: The symbol has now a wiewBox attribute: viewBox="0 0 20 20" This means that the symbol has a width of 20 units and a height of 20 units. Now you can use the symbol like this:
<use xlink:href="#rooftop-0" width="20" height="20" x="63" y="21" />
As you can see I can give the symbol a width and a height in this case width="20" height="20" but you can give it any size you need. Also you can use the x and y attributes to reposition the used symbol.
Now you can also rotate the use element around it's center by using transform="rotate(90,73,31)" This is rotating the element 90degs around the point {x:73,y:31}
<svg viewBox="0 0 211 211">
<style>
.grid-line {
fill: #DDD;
}
.grass-fill {
fill: #8C8;
}
.theme-0 {
--roof-color-0: #F44;
--roof-color-1: #F66;
--roof-color-2: #F88;
--roof-color-3: #FAA;
}
.theme-1 {
--roof-color-0: #44F;
--roof-color-1: #66F;
--roof-color-2: #88F;
--roof-color-3: #AAF;
}
</style>
<defs>
<pattern id="grid" width="21" height="21" patternUnits="userSpaceOnUse">
<rect class="grid-line" x="0" y="0" width="1" height="21" />
<rect class="grid-line" x="0" y="0" width="21" height="1" />
</pattern>
<symbol id="rooftop-0" viewBox="0 0 20 20">
<g class="tile">
<rect class="grass-fill" width="20" height="20" />
<polygon style="fill: var(--roof-color-0)" points="3,2 17,2 18,8 2,8" />
<polygon style="fill: var(--roof-color-1)" points="2,8 18,8 17,14 3,14" />
<polygon style="fill: var(--roof-color-2)" points="8,8 11,14 11,18 8,18" />
<polygon style="fill: var(--roof-color-3)" points="8,8 8,18 5,18 5,14" />
</g>
</symbol>
</defs>
<g>
<rect fill="#999" width="100%" height="100%" />
<rect fill="url(#grid)" width="100%" height="100%" />
</g>
<g transform="translate(1, 1)">
<use x="42" y="21" xlink:href="#rooftop-0" class="theme-1" width="20" height="20" />
<use x="63" y="21" xlink:href="#rooftop-0" class="theme-0" width="20" height="20" transform="rotate(90,73,31)" />
</g>
</svg>

SVG bars graph upside down without rotation

I have an svg rect chart like:
<div style="width:300px;height:300px;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%;height:100%" viewBox="0 0 300 300">
<g>
<rect width="14.55" height="40%" x="0" y="0" fill="black"></rect>
<rect width="14.55" height="20%" x="50" y="0" fill="green"></rect>
<rect width="14.55" height="80%" x="100" y="0" fill="red"></rect>
<rect width="14.55" height="90%" x="150" y="0" fill="yellow"></rect>
<rect width="14.55" height="10%" x="200" y="0" fill="pink"></rect>
<rect width="14.55" height="60%" x="250" y="0" fill="orange"></rect>
</g>
</svg>
</div>
What I want to do is to display it upside down.
The code and a given solution, are coming from http://jsfiddle.net/rhvP8/5/
Although, I want to keep each bar in the same X place. So, rotation approach is not that useful in this case.
Any help is welcome.

Rotation of the x-axis only seems be be what you require.
svg {
border: 1px solid green;
transform: rotateX(180deg);
}
<div style="width:300px;height:300px;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%;height:100%" viewBox="0 0 300 300">
<g>
<rect width="14.55" height="40%" x="0" y="0" fill="black"></rect>
<rect width="14.55" height="20%" x="50" y="0" fill="green"></rect>
<rect width="14.55" height="80%" x="100" y="0" fill="red"></rect>
<rect width="14.55" height="90%" x="150" y="0" fill="yellow"></rect>
<rect width="14.55" height="10%" x="200" y="0" fill="pink"></rect>
<rect width="14.55" height="60%" x="250" y="0" fill="orange"></rect>
</g>
</svg>
</div>

SVG clip path hole / inner cut

<clipPath id="clip1">
<rect x="10" y="222" height="30" width="50" rx="5" />
</clipPath>
<image .... clip-path="url(#clip1)" />
It cuts the outer space of the image. But I want to cut a hole into the image. How can I achieve it?

For your purposes, you can use a mask
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<rect x="50" y="50" height="50" width="100" rx="5" fill="black" />
</mask>
</defs>
<image x="0" y="0" width="200" height="200"
xlink:href="http://placeimg.com/200/200/any"
mask="url(#hole)" >
</image>
</svg>

Resources