How to make svg RTL - css

I want to make svg RTL, meaning i want to change the origin from 'Top Left' to 'Top Right' in a way that when i say draw a path M 0 0 L 100 100, it creates a line that starts with top: 0, right: 0 and goes to top: 100, right: 100
I tried most common solution for changing origin but none of them work as i want it to
My code:
<svg
style={{ width: "100%", height: "100%", textAlign: "right" }}
//preserveAspectRatio="xMaxYMin meet"
>
<path stroke="green" strokeWidth="3" fill="none" d="M 0 0 L 100 100" />
</svg>
And here is a working example of the code


Translate and scale the canvas, though be warned any text will display RTL too.
<svg width="200" height="200">
<g transform="translate(200, 0) scale(-1, 1)">
<path stroke="green" strokeWidth="3" fill="none" d="M 0 0 L 100 100" />
</g>
</svg>

Related

how can I get the text around whatsapp fa icon?

I'm trying to put the svg text around the whatsapp fa icon, something like this
but unable to achieve desired result. this is what I'm getting so far.
I tried with the below code.
<a id='whatsapp'
style={{
bottom: '162px', right: '32px', fontSize: '3.3rem',
padding: '0.6rem', backgroundColor: '#70d470',
color: '#fff'
}}
href="https://wa.me/1232365326"
target="_blank" rel="noopener noreferrer"
className={`${visible ? "block whatsapp" : "none"}`}
>
<svg viewBox="0 0 100 100" width="100" height="100">
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="8">
<textPath xlinkHref="#circle">
Need Appointment? Click me!
</textPath>
</text>
</svg>
<RiWhatsappFill/>
</a>

You could try using position: 'absolute' on the text, then aligning it manually.
Here's something that might work, give it a shot.
<a id='whatsapp'
style={{
bottom: '162px', right: '32px', fontSize: '3.3rem',
padding: '0.6rem', backgroundColor: '#70d470',
color: '#fff'
}}
href="https://wa.me/1232365326"
target="_blank" rel="noopener noreferrer"
className={`${visible ? "block whatsapp" : "none"}`}
>
<svg viewBox="0 0 100 100" width="100" height="100">
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text style={{position: 'absolute', right: '32px', top: '2px'}} font-size="8">
<textPath xlinkHref="#circle">
Need Appointment? Click me!
</textPath>
</text>
</svg>
<RiWhatsappFill/>
</a>

flip an element inside SVG horizontally but keeps it's original position

I want to flip SVG elements (path, line, polyline, text ...) without changing the original position. For example
<div id="canvas" style="width: 550px; height: 550px">
<svg version="1.2" baseProfile="tiny" id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" xml:space="preserve">
<text id="text" transform="matrix(1 0 0 1 31.1271 199.1222)" fill="#561010" font-family="'Roboto-Regular'" font-size="25.3945px">Nom d’entreprise</text>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="76.157" y1="87.0921" x2="70.9488" y2="44.8529"> <stop offset="0.0233" style="stop-color:#E92460"></stop> <stop offset="0.4636" style="stop-color:#F05C4B"></stop> <stop offset="0.9517" style="stop-color:#F36D38"></stop> </linearGradient>
<path transform="matrix(1 0 0 1 0 0)" fill="url(#SVGID_2_)" d="M51.75,55.77c-0.27-0.39,3.97-5.2,10.38-7.74c1.79-0.71,11.97-4.75,21.31,0.8
c8.61,5.12,11.99,15.71,10.53,24.27c-2.38,13.95-17.76,23.37-22.24,20.72c-0.97-0.57-1.32-2.75-1.99-7.09
c-1.81-11.84-1.68-20.54-1.68-20.54c0.05-3.05,0.19-4.38-0.61-6.25c-1.42-3.32-4.9-6.23-8.62-6.47
C54.84,53.21,51.97,56.08,51.75,55.77z"></path>
</g>
</svg>
</div>
I tried various solution such as changing transform to matrix(-1 0 0 1 -100 0). Also I have tried to add attribute transform-origin="center".
All I reached is a missplaced element. I have been trying the following:
flipHorizontal(){
let viewBox_array = this.getViewBox(); // this returns ['0', '0', '250', '250']
let canvas_width = $("#canvas").width();
this.selectedElements.forEach(element =>{
let element_width = element.getBoundingClientRect().width
element.setAttribute("transform-origin", "center")
var matrix = element.transform.baseVal[0].matrix;
matrix.a = (-1) * matrix.a
let diff = (element_width / (canvas_width / Number(viewBox_array[2])) )* Math.sign(matrix.a);
matrix.e += diff;
});
this.edit_done();
}
Also tried the following
flipHorizontal(){
this.selectedElements.forEach(element =>{
element.setAttribute("transform-origin", "center")
let bbox = element.getBBox();
var matrix = element.transform.baseVal[0].matrix;
matrix.a = (-1) * matrix.a
matrix.e += Math.sign(matrix.a) * (bbox.width + bbox.x);
});
this.edit_done();
}

As detailed in my answer here, the transform functions needed to flip in place are:
translate(<minX+maxX>,0) scale(-1, 1)
So, a working version of your code, might look something like this:
function flipHorizontal(selectedElements) {
selectedElements.forEach(element => {
// Get the bounds of the element
let bbox = element.getBBox();
// Get the current transform attribute (if any) of the element
let currentTransform = element.getAttribute("transform") || "";
// Append translate and scale functions to the transform that will flip the element in place
element.setAttribute("transform", currentTransform + ' translate('+(bbox.x + bbox.x + bbox.width) + ',0) scale(-1, 1)');
});
}
let elementsToFlip = document.querySelectorAll("path, text");
flipHorizontal( elementsToFlip );
<div id="canvas" style="width: 550px; height: 550px">
<svg version="1.2" baseProfile="tiny" id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" xml:space="preserve">
<text id="text" transform="matrix(1 0 0 1 31.1271 199.1222)" fill="#561010" font-family="'Roboto-Regular'" font-size="25.3945px">Nom d’entreprise</text>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="76.157" y1="87.0921" x2="70.9488" y2="44.8529"> <stop offset="0.0233" style="stop-color:#E92460"></stop> <stop offset="0.4636" style="stop-color:#F05C4B"></stop> <stop offset="0.9517" style="stop-color:#F36D38"></stop> </linearGradient>
<path transform="matrix(1 0 0 1 0 0)" fill="url(#SVGID_2_)" d="M51.75,55.77c-0.27-0.39,3.97-5.2,10.38-7.74c1.79-0.71,11.97-4.75,21.31,0.8
c8.61,5.12,11.99,15.71,10.53,24.27c-2.38,13.95-17.76,23.37-22.24,20.72c-0.97-0.57-1.32-2.75-1.99-7.09
c-1.81-11.84-1.68-20.54-1.68-20.54c0.05-3.05,0.19-4.38-0.61-6.25c-1.42-3.32-4.9-6.23-8.62-6.47
C54.84,53.21,51.97,56.08,51.75,55.77z"></path>
</g>
</svg>
</div>

You can do this with the only CSS, for example:
.logo_text--flipped, .logo_image--flipped {
transform-origin: center center;
transform: scaleX(-1);
}
<div id="canvas" style="width: 550px; height: 550px">
<svg version="1.2" baseProfile="tiny" id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" xml:space="preserve">
<g class="logo_text logo_text--flipped">
<text id="text" transform="matrix(1 0 0 1 31.1271 199.1222)" fill="#561010" font-family="'Roboto-Regular'" font-size="25.3945px">Nom d’entreprise</text>
</g>
<g class="logo_image logo_image--flipped">
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="76.157" y1="87.0921" x2="70.9488" y2="44.8529">
<stop offset="0.0233" style="stop-color:#E92460"></stop>
<stop offset="0.4636" style="stop-color:#F05C4B"></stop>
<stop offset="0.9517" style="stop-color:#F36D38"></stop>
</linearGradient>
<path transform="matrix(1 0 0 1 0 0)" fill="url(#SVGID_2_)" d="M51.75,55.77c-0.27-0.39,3.97-5.2,10.38-7.74c1.79-0.71,11.97-4.75,21.31,0.8
c8.61,5.12,11.99,15.71,10.53,24.27c-2.38,13.95-17.76,23.37-22.24,20.72c-0.97-0.57-1.32-2.75-1.99-7.09
c-1.81-11.84-1.68-20.54-1.68-20.54c0.05-3.05,0.19-4.38-0.61-6.25c-1.42-3.32-4.9-6.23-8.62-6.47
C54.84,53.21,51.97,56.08,51.75,55.77z"></path>
</g>
</svg>
</div>
So you can create a specific class and toggle it via JS

How use svg or qml shapes for template on my application

I want to create an application for dispaly poem and I want to use Eslimi arts for frame or template to display these peoms .an example of Eslimi are in this page and here .But I have a problem with multiple screen size on mobile and desktops,For example I deployed my app on some are good but on and some are small because I use jpg file of these arts,So the jpg file could not adjust himself for be taller or wider.So I decided to pars these svg files to multiple parts and make them display progammatically aroud the poems.Untile
In Shapes Example there is a Tiger.qml file like below
import QtQuick 2.12
import QtQuick.Shapes 1.12
Shape {
asynchronous: true
width: 494; height: 510
ShapePath {
fillColor: "#ffffff"
strokeColor: "#000000"
strokeWidth: 0.172
PathMove { x: -122.304; y: 84.285 }
PathCubic { control1X: -122.304; control1Y: 84.285; control2X: -122.203; control2Y: 86.179; x: -123.027; y: 86.16 }
PathCubic { control1X: -123.851; control1Y: 86.141; control2X: -140.305; control2Y: 38.066; x: -160.833; y: 40.309 }
PathCubic { control1X: -160.833; control1Y: 40.309; control2X: -143.05; control2Y: 32.956; x: -122.304; y: 84.285 }
}
}
Now I have a svg file like this,
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#282F68;}
.st1{fill:#FFFFFF;}
.st2{fill:#91D0D5;}
</style>
<g>
<g>
<path class="st0" d="M474.1,130.5c-56.1,11.6-103.7-45.8-157,21.2C348.5,72.1,274.8,59.4,256.7,5c-0.2,0.6-0.5,1.2-0.7,1.8
c-0.2-0.6-0.5-1.1-0.7-1.8c-18.1,54.4-91.7,67-60.3,146.7c-53.4-67-101-9.7-157-21.2c38,42.8,12,113.1,96.7,125.7
C50,268.9,76,338.7,37.9,381.5c56.1-11.5,103.7,46.2,157-20.8c-31.4,79.7,42.2,92,60.3,146.3c0.2-0.6,0.5-1.2,0.7-1.8
c0.2,0.6,0.5,1.1,0.7,1.8c18.1-54.4,91.7-66.6,60.3-146.3c53.3,67,101,9.3,157,20.8c-38-42.8-12-112.6-96.7-125.2
C462,243.6,436,173.3,474.1,130.5z"/>
<g>
<path class="st1" d="M255.3,162.2c0.3-0.1,0.4-0.3,0.7-0.4c0.3,0.1,0.4,0.3,0.7,0.4c42.5-19,34.2-57.3,0-92.6
c-0.3,0.3-0.5,0.6-0.7,0.9c-0.3-0.3-0.5-0.6-0.7-0.9C221.1,104.9,212.8,143.2,255.3,162.2z"/>
<path class="st1" d="M93.6,162.9c13.5,47.2,42.5,73.5,80.2,46.3C178.6,162.9,141.2,150.9,93.6,162.9z"/>
<path class="st1" d="M93.6,349.5c47.6,12,85,0,80.2-46.3C136.1,276,107.1,302.3,93.6,349.5z"/>
<path class="st1" d="M338.2,303.3c-4.8,46.2,32.6,58.2,80.2,46.3C404.9,302.3,375.9,276,338.2,303.3z"/>
<path class="st1" d="M256.8,350.2c-0.3,0.1-0.5,0.3-0.8,0.5c-0.3-0.2-0.5-0.3-0.8-0.5c-42.5,19-34.2,57.4,0,92.6
c0.3-0.3,0.5-0.6,0.8-0.9c0.3,0.3,0.5,0.6,0.8,0.9C291,407.6,299.3,369.2,256.8,350.2z"/>
<path class="st1" d="M338.2,209.1c37.7,27.3,66.7,1,80.2-46.3C370.8,150.9,333.4,162.9,338.2,209.1z"/>
</g>
</g>
<g>
<g>
<path class="st2" d="M310.3,284.4c17,28.4-33.1,57.4-49.2,28.4c-0.2,0.3-0.5,0.5-0.7,0.8c-0.2-0.3-0.5-0.4-0.7-0.8
c-16.1,29-66.2-0.1-49.2-28.4c-33.1,0.5-33.1-57.3,0-56.8c-16.9-28.4,33.1-57.3,49.2-28.3c0.2-0.3,0.5-0.5,0.7-0.8
c0.2,0.3,0.5,0.5,0.7,0.8c16.2-29,66.2-0.1,49.2,28.3C343.4,227,343.4,284.9,310.3,284.4z"/>
</g>
<path class="st1" d="M287.4,256c0-18-13.5-27.1-27-27.1c-13.5,0.1-27,9.1-27,27.1c0,18,13.5,27.1,27,27.1
C273.9,283.1,287.4,274,287.4,256z"/>
</g>
</g>
</svg>
This svg file is a simplified of complex svg file .So I don't know how do the works.Shold I convert svg to qml shapes? shoudl I convert svg to qquickitem? or what? Does any one know How Should I work this?

Animate tspan x & y

CSS
#keyframes moveText {
0% {
y:100;
}
100% {
y:300;
}
}
#Achieve tspan {
animation:moveText 1s linear;
animation-fill-mode:forwards;
}
SVG
<svg width:"300px" height:"300px" viewBox="0 0 300 300" version="1.1">
<text id="Achieve" fill="#CCD1D9">
<tspan x="100" y="264">Achieve</tspan>
</text>
</svg>
I have SVG image that I want to animate. I want to move x=100 to x=300 yet I have tried everything (that I could think of) and nothing has worked.
Thank you.

You may use translation:
#keyframes moveText {
100% {
transform:translateY(200px);
}
}
#Achieve {
animation:moveText 1s linear;
animation-fill-mode:forwards;
}
<svg width="300" viewBox="0 0 300 300" version="1.1">
<text id="Achieve" fill="#000" x="100" y="100">
<tspan >Achieve</tspan>
</text>
</svg>

You can use the SVG animate element.
I want to move x=100 to x=300
If you move the text to 300 it will appear out of the viewbox. You need to consider the width of the text.
Example
<svg width="300px" height="300px" viewBox="0 0 300 300" version="1.1">
<text id="Achieve" fill="#CCD1D9">
<tspan x="200" y="264">Achieve
<animate attributeType="XML" attributeName="x" from="100" to="200"
dur="1s" repeatCount="0"/></tspan>
</text>
</svg>

SVG center text in circle

I'm trying to center text in a circle with svg.
the size of the text will be dynamic.
Thank's
Avi
plunker
My code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 500 500">
<g id="UrTavla">
<circle style="fill:url(#toning);stroke:#010101;stroke-width:1.6871;stroke-miterlimit:10;" cx="250" cy="250" r="245">
</circle>
<text x="50%" y="50%" stroke="#51c5cf" stroke-width="2px" dy=".3em"> Look, I’m centered!Look, I’m centered! </text>
</g>
</svg>

Add text-anchor="middle" to the text element.
Plunker
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 500 500">
<g id="UrTavla">
<circle style="fill:url(#toning);stroke:#010101;stroke-width:1.6871;stroke-miterlimit:10;" cx="250" cy="250" r="245">
</circle>
<text x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="2px" dy=".3em">Look, I’m centered!Look, I’m centered!</text>
</g>
</svg>

The solution proposed and accepted is INVALID when you want to draw a circle that is not centered on container !
Using x="50%" y="50%" on text tag works only when SVG element contains a circle that is centered on viewPort.
If you want to draw 3 circles, you must also change (x,y) text coordinates so that they are equal to (cx,cy) circle coordinates has done in following example
As proposed by random, I have added alignment-baseline="middle" for first circle in code snippet only so you can see that for Label text is now perfectly aligned (vertically).
<svg height="350" width="350">
<circle cx="110" cy="110" r="100"
stroke="red"
stroke-width="3"
fill="none"
/>
<text x="110" y="110"
text-anchor="middle"
stroke="red"
stroke-width="1px"
alignment-baseline="middle"
> Label
</text>
<circle cx="240" cy="110" r="100"
stroke="blue"
stroke-width="3"
fill="none"
/>
<text x="240" y="110"
text-anchor="middle"
stroke="blue"
stroke-width="1px"
> Ticket
</text>
<circle cx="170" cy="240" r="100"
stroke="green"
stroke-width="3"
fill="none"
/>
<text x="170" y="240"
text-anchor="middle"
stroke="green"
stroke-width="1px"
> Vecto
</text>
</svg>
Just for the fun, I have put code with 3 circles to select each parts. Just click on it !
function setReadableCode()
{
var circLabel = document.getElementById('circLabel');
var circTicket = document.getElementById('circTicket');
var circVecto = document.getElementById('circVecto');
var interLabelTicket = document.getElementById('interLabelTicket');
var interTicketVecto = document.getElementById('interTicketVecto');
var interVectoLabel = document.getElementById('interVectoLabel');
var interLabelTicketVecto = document.getElementById('interLabelTicketVecto');
}
function clickCircle(sCircle, sInter2a, sInter2b, sInter3)
{
var circ = document.getElementById(sCircle);
var inter2a = document.getElementById(sInter2a);
var inter2b = document.getElementById(sInter2b);
var inter3 = document.getElementById(sInter3);
var sColor = '';
if (circ.style.fill == '' || circ.style.fill == 'white')
{
sColor = 'yellow';
}
else
{
sColor = 'white';
}
circ.style.fill = sColor;
inter2a.style.fill = sColor;
inter2b.style.fill = sColor;
inter3.style.fill = sColor;
setReadableCode();
}
function clickCircLabel() {
clickCircle('circLabel', 'interLabelTicket', 'interVectoLabel', 'interLabelTicketVecto');
}
function clickCircTicket() {
clickCircle('circTicket', 'interLabelTicket', 'interTicketVecto', 'interLabelTicketVecto');
}
function clickCircVecto() {
clickCircle('circVecto', 'interVectoLabel', 'interTicketVecto', 'interLabelTicketVecto');
}
function clickIntersection2(sInter2, sInter3) {
var inter2 = document.getElementById(sInter2);
var inter3 = document.getElementById(sInter3);
var sColor = '';
if (inter2.style.fill == '' || inter2.style.fill == 'white') {
sColor = 'yellow';
}
else {
sColor = 'white';
}
inter2.style.fill = sColor;
inter3.style.fill = sColor;
setReadableCode();
}
function clickInterLabelTicket() {
clickIntersection2('interLabelTicket', 'interLabelTicketVecto');
}
function clickInterTicketVecto() {
clickIntersection2('interTicketVecto', 'interLabelTicketVecto');
}
function clickInterVectoLabel() {
clickIntersection2('interVectoLabel', 'interLabelTicketVecto');
}
function clickInterLabelTicketVecto() {
var inter = document.getElementById('interLabelTicketVecto');
var sColor = '';
if (inter.style.fill == '' || inter.style.fill == 'white') {
sColor = 'yellow';
}
else {
sColor = 'white';
}
inter.style.fill = sColor;
setReadableCode();
}
text
{
font-family:Arial;
}
<svg height="350" width="350">
<circle id="circLabel" cx="110" cy="110" r="100" stroke="red" stroke-width="0" fill="white" onclick="clickCircLabel();"/>
<text x="60" y="110" text-anchor="middle" stroke="red" stroke-width="1px" onclick="clickCircLabel();">Label</text>
<circle id="circTicket" cx="210" cy="110" r="100" stroke="blue" stroke-width="0" fill="yellow" onclick="clickCircTicket();"/>
<text x="260" y="110" text-anchor="middle" stroke="blue" stroke-width="1px" onclick="clickCircTicket();">Ticket</text>
<circle id="circVecto" cx="160" cy="196.602541" r="100" stroke="green" stroke-width="0" fill="white" onclick="clickCircVecto();" />
<text x="160" y="240" text-anchor="middle" stroke="green" stroke-width="1px" onclick="clickCircVecto();">Vecto</text>
<path id="interLabelTicket"
d="M 160 23.397460 a100,100 0 0,0 0,173.205081 a100,100 0 0,0 0,-173.205081 z"
fill="white"
stroke-width="3"
onclick="clickInterLabelTicket();"
/>
<path id="interVectoLabel"
d="M 60 196.602541 a100,100 0 0,0 150,-86.602540 a100,100 0 0,0 -150,86.602540 z"
fill="white"
stroke-width="3"
onclick="clickInterVectoLabel();"
/>
<path id="interTicketVecto"
d="M 260 196.602541 a100,100 0 0,0 -150,-86.602540 a100,100 0 0,0 150,86.602540 z"
fill="white"
stroke-width="3"
onclick="clickInterTicketVecto();"
/>
<path id="interLabelTicketVecto"
d="M 110 110 a100,100 0 0,1 100,0 a100,100 0 0,1 -50,86.602540 a100,100 0 0,1 -50,-86.602540 z"
fill="none"
stroke-width="3"
onclick="clickInterLabelTicketVecto();"
/>
<circle cx="110" cy="110" r="100" stroke="red" stroke-width="3" fill="none" />
<circle cx="210" cy="110" r="100" stroke="blue" stroke-width="3" fill="none" />
<circle cx="160" cy="196.602541" r="100" stroke="green" stroke-width="3" fill="none"/>
</svg>

Maybe, could be useful also alignment-baseline="middle", with text-anchor="middle":
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 500 500">
<g id="UrTavla">
<circle style="fill:url(#toning);stroke:#010101;stroke-width:1.6871;stroke-miterlimit:10;" cx="250" cy="250" r="245" /> <!--self-closing tag-->
<text x="50%" y="50%" stroke="#51c5cf" stroke-width="2px" dy=".3em" text-anchor="middle" alignment-baseline="middle"> Look, I’m centered!Look, I’m centered! </text>
</g>
</svg>
Here a good resource:
http://apike.ca/prog_svg_text_style.html
Cheers

A simpler solution that works with non-centered circles is to put circles and texts inside translated groups.
That way you don't need to repeat the coordinates on the text.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Centered texts</title>
</head>
<body ng-controller="MainCtrl">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<g transform="translate(300, 300)" >
<circle fill="none" stroke="black" stroke-width="1px" r="120"/>
<text stroke="blue" stroke-width="1px" text-anchor="middle" alignment-baseline="central">Look, I’m centered!</text>
</g>
<g transform="translate(150, 150)" >
<circle fill="none" stroke="black" stroke-width="1px" r="120"/>
<text stroke="blue" stroke-width="1px" text-anchor="middle" alignment-baseline="central">Look, I’m also centered!</text>
</g>
</svg>
</body>
</html>

The behaviors are not consistent across browsers using alignment-baseline="central". Notably, Chrome will position correctly but Firefox will not. If you use dominant-baseline="central" it will appear correctly in both.
<svg viewBox="0 0 500 500" role="img" xmlns="http://www.w3.org/2000/svg">
<g id="myid">
<circle stroke="darkgray" stroke-width="1px" fill="lightgray" cx="250" cy="250" r="245"/>
<text style="font: bold 10rem sans-serif;" text-anchor="middle" dominant-baseline="central" x="50%" y="50%">Centered</text>
</g>
</svg>

it is super easy to make text center in SVG circle.
<svg height="300" width="300">
<circle cx="120" cy="120" r="30%" fill="#117da9" />
<text x="50" y="120" fill="white">Center Text in SVG Circle</text>
</svg>
All you need to do is change <text> tag x and y values until the given text align in the center of the circle.
For example, here x and y values are x="50" y="120"

Resources