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.
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>
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>
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>
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>
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>