We Keep Coding

Is it possible to programatically control fill color of individual cells of svg pattern?

<svg viewBox="200 190 500 500" id="example">
<defs>
<pattern id="patt" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<g stroke="black" strokeWidth="0.5" >
<path id='a' fill='green' d="M0,0.054V20h21V0.054H0z M15.422,18.129l-5.264-2.768l-5.265,2.768l1.006-5.863L1.64,8.114l5.887-0.855 l2.632-5.334l2.633,5.334l5.885,0.855l-4.258,4.152L15.422,18.129z"/>
</g>
</pattern>
</defs>
<g fill="url(#patt)" stroke="orange" >
<circle cx="450" cy="300" r="100"/>
</g>
</svg>
Requirement is to create a pattern of svg in which fill color of each element in the pattern has to be manipulated.

Only when you create all colored shapes inside the <pattern> yourself:
<svg-pattern colors="green,red,blue,yellow"></svg-pattern>
<svg-pattern colors="purple,hotpink,hotpink,purple"></svg-pattern>
<script>
customElements.define("svg-pattern", class extends HTMLElement {
connectedCallback() {
let colors = this.getAttribute("colors").split(",");
let star = `v20h21v-20h-21zm15.4 18-5.3-2.8-5.3 2.8 1-5.9-4.3-4.2 5.9-.9 2.6-5.3 2.6 5.3 5.9.9-4.3 4.2 1 6z`;
let id = "unique" + Math.random();
this.innerHTML = `<svg width="180" height="180" style="display:inline-block" viewBox="0 0 200 200">
<defs>
<pattern id="${id}" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
<g stroke="black" strokeWidth="0.5" >
<path fill='${colors[0]}' d="m0 0 ${star}"/>
<path fill='${colors[1]}' d="m20 0 ${star}"/>
<path fill='${colors[2]}' d="m0 20 ${star}"/>
<path fill='${colors[3]}' d="m20 20 ${star}"/>
</g>
</pattern>
</defs>
<g fill="url(#${id})">
<circle cx="100" cy="100" r="100"/>
</g>
</svg>`;
}
});
</script>

Apply on focus css when click on svg element

I have an svg file.
I would that when I click on a station name, the station stay scaled.
For that I used focus method and then in CSS with the selector :focused apply the effect
But that's not working , nothing is happening.
ps: you can ignore forEach loop it's not so important to understand
let stops = document.querySelector("#stops");
// all the g elements in the stops
let gs = stops.querySelectorAll("g");
// for each g in the gs
gs.forEach(g=>{
// the rectangle in this g element
let thisRect = g.querySelector("rect");
// the circle in this g element
let thisCircle = g.querySelector("circle");
// the coords of the circle's center used for the transform-origin
let x = thisCircle.getAttribute("cx");
let y = thisCircle.getAttribute("cy");
// the bounding box of the group
let bb = g.getBBox();
// set the rect's attributes
thisRect.setAttributeNS(null, "x", bb.x);
thisRect.setAttributeNS(null, "y", bb.y);
thisRect.setAttributeNS(null, "width", bb.width);
thisRect.setAttributeNS(null, "height", bb.height);
// set the value for the transform-origin for this group
g.style.transformOrigin = `${x}px ${y}px`;
})
document.getElementById('g3670').focus()
function showmessage() {
alert("heloo");
}
text{
font-family: Lato;
font-size:16px;
}
g * {pointer-events:none;}
g rect{pointer-events:all;}
#stops g{transform: scale(1);cursor: pointer;}
#stops g:hover {
transform: scale(2);
}
#stops g:active {
transform: scale(2)
}
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 775.43 469.98">
<defs>
<style>.cls-1{fill:none;stroke-width:5px;}.cls-1,.cls-2{stroke:#a15256;}.cls-2{fill:#fff;}.cls-3{isolation:isolate;font-size:42.79px;font-family:ArialMT, Arial;}</style>
</defs>
<title>line</title>
<path id="path7" class="cls-1" d="M202,67.72,329.33,215.86" transform="translate(-200.1 -66.09)" />
<path id="path8" class="cls-1" d="M329.35,215.87,449,355" transform="translate(-200.1 -66.09)" />
<path id="path9" class="cls-1" d="M449,355c41.53,51.11,96.22,63.08,117.9,69.28" transform="translate(-200.1 -66.09)" />
<path id="path10" class="cls-1" d="M566.86,424.29C655.43,460.48,977.38,391.48,973,536" transform="translate(-200.1 -66.09)" />
<g id="stops">
<g id="g3670">
<rect fill="none"/>
<circle class="cls-2" cx="129.24" cy="149.78" r="13.58" />
<text id="text3668" class="cls-3" transform="translate(145 160)">Station1</text>
</g>
<g id="g3700">
<rect fill="none"/>
<circle class="cls-2" cx="248.91" cy="288.93" r="13.58" />
<text id="text3698" class="cls-3" transform="translate(270 300)">Station2</text>
</g>
<g id="g3750">
<rect fill="none"/>
<circle class="cls-2" cx="366.75" cy="358.2" r="13.58" />
<text id="text3748" class="cls-3" transform="translate(200 400)">Station3</text>
</g>
</g>
</svg>

Add tabindex to stations:
let stops = document.querySelector("#stops");
// all the g elements in the stops
let gs = stops.querySelectorAll("g");
// for each g in the gs
gs.forEach((g, i) => {
g.setAttribute('tabindex', i);
// the rectangle in this g element
let thisRect = g.querySelector("rect");
// the circle in this g element
let thisCircle = g.querySelector("circle");
// the coords of the circle's center used for the transform-origin
let x = thisCircle.getAttribute("cx");
let y = thisCircle.getAttribute("cy");
// the bounding box of the group
let bb = g.getBBox();
// set the rect's attributes
thisRect.setAttributeNS(null, "x", bb.x);
thisRect.setAttributeNS(null, "y", bb.y);
thisRect.setAttributeNS(null, "width", bb.width);
thisRect.setAttributeNS(null, "height", bb.height);
// set the value for the transform-origin for this group
g.style.transformOrigin = `${x}px ${y}px`;
})
document.getElementById('g3670').focus()
function showmessage() {
alert("heloo");
}
text{
font-family: Lato;
font-size:16px;
}
g * {pointer-events:none;}
g rect{pointer-events:all;}
#stops g{transform: scale(1);cursor: pointer;transition:.3s}
#stops g:hover {
transform: scale(2);
}
#stops g:focus {
outline: 0;
transform: scale(2)
}
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 775.43 469.98">
<defs>
<style>.cls-1{fill:none;stroke-width:5px;}.cls-1,.cls-2{stroke:#a15256;}.cls-2{fill:#fff;}.cls-3{isolation:isolate;font-size:42.79px;font-family:ArialMT, Arial;}</style>
</defs>
<title>line</title>
<path id="path7" class="cls-1" d="M202,67.72,329.33,215.86" transform="translate(-200.1 -66.09)" />
<path id="path8" class="cls-1" d="M329.35,215.87,449,355" transform="translate(-200.1 -66.09)" />
<path id="path9" class="cls-1" d="M449,355c41.53,51.11,96.22,63.08,117.9,69.28" transform="translate(-200.1 -66.09)" />
<path id="path10" class="cls-1" d="M566.86,424.29C655.43,460.48,977.38,391.48,973,536" transform="translate(-200.1 -66.09)" />
<g id="stops">
<g id="g3670">
<rect fill="none"/>
<circle class="cls-2" cx="129.24" cy="149.78" r="13.58" />
<text id="text3668" class="cls-3" transform="translate(145 160)">Station1</text>
</g>
<g id="g3700">
<rect fill="none"/>
<circle class="cls-2" cx="248.91" cy="288.93" r="13.58" />
<text id="text3698" class="cls-3" transform="translate(270 300)">Station2</text>
</g>
<g id="g3750">
<rect fill="none"/>
<circle class="cls-2" cx="366.75" cy="358.2" r="13.58" />
<text id="text3748" class="cls-3" transform="translate(200 400)">Station3</text>
</g>
</g>
</svg>

This is how I would do it: on click I would toggle a class active for the clicked group. In your code I've added this:
g.addEventListener("click",()=>{
g.classList.toggle("active")
})
inside the forEach.
let stops = document.querySelector("#stops");
// all the g elements in the stops
let gs = stops.querySelectorAll("g");
// for each g in the gs
gs.forEach(g=>{
// the rectangle in this g element
let thisRect = g.querySelector("rect");
// the circle in this g element
let thisCircle = g.querySelector("circle");
// the coords of the circle's center used for the transform-origin
let x = thisCircle.getAttribute("cx");
let y = thisCircle.getAttribute("cy");
// the bounding box of the group
let bb = g.getBBox();
// set the rect's attributes
thisRect.setAttributeNS(null, "x", bb.x);
thisRect.setAttributeNS(null, "y", bb.y);
thisRect.setAttributeNS(null, "width", bb.width);
thisRect.setAttributeNS(null, "height", bb.height);
// set the value for the transform-origin for this group
g.style.transformOrigin = `${x}px ${y}px`;
g.addEventListener("click",()=>{
g.classList.toggle("active")
})
})
document.getElementById('g3670').focus()
function showmessage() {
console.log("heloo");
}
text{
font-family: Lato;
font-size:16px;
}
g * {pointer-events:none;}
g rect{pointer-events:all;}
#stops g{transform: scale(1);cursor: pointer;}
#stops g:hover {
transform: scale(2);
}
#stops g.active {
transform: scale(2)
}
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 775.43 469.98">
<defs>
<style>.cls-1{fill:none;stroke-width:5px;}.cls-1,.cls-2{stroke:#a15256;}.cls-2{fill:#fff;}.cls-3{isolation:isolate;font-size:42.79px;font-family:ArialMT, Arial;}</style>
</defs>
<title>line</title>
<path id="path7" class="cls-1" d="M202,67.72,329.33,215.86" transform="translate(-200.1 -66.09)" />
<path id="path8" class="cls-1" d="M329.35,215.87,449,355" transform="translate(-200.1 -66.09)" />
<path id="path9" class="cls-1" d="M449,355c41.53,51.11,96.22,63.08,117.9,69.28" transform="translate(-200.1 -66.09)" />
<path id="path10" class="cls-1" d="M566.86,424.29C655.43,460.48,977.38,391.48,973,536" transform="translate(-200.1 -66.09)" />
<g id="stops">
<g id="g3670">
<rect fill="none"/>
<circle class="cls-2" cx="129.24" cy="149.78" r="13.58" />
<text id="text3668" class="cls-3" transform="translate(145 160)">Station1</text>
</g>
<g id="g3700">
<rect fill="none"/>
<circle class="cls-2" cx="248.91" cy="288.93" r="13.58" />
<text id="text3698" class="cls-3" transform="translate(270 300)">Station2</text>
</g>
<g id="g3750">
<rect fill="none"/>
<circle class="cls-2" cx="366.75" cy="358.2" r="13.58" />
<text id="text3748" class="cls-3" transform="translate(200 400)">Station3</text>
</g>
</g>
</svg>

Calculate SVG.Text Length before drawing [duplicate]

I want to color the background of svg text similar to background-color in css
I was only able to find documentation on fill, which colors the text itself
Is it even possible?

You could use a filter to generate the background.
<svg width="100%" height="100%">
<defs>
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="yellow" result="bg" />
<feMerge>
<feMergeNode in="bg"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text filter="url(#solid)" x="20" y="50" font-size="50">solid background</text>
</svg>

No this is not possible, SVG elements do not have background-... presentation attributes.
To simulate this effect you could draw a rectangle behind the text attribute with fill="green" or something similar (filters). Using JavaScript you could do the following:
var ctx = document.getElementById("the-svg"),
textElm = ctx.getElementById("the-text"),
SVGRect = textElm.getBBox();
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", SVGRect.x);
rect.setAttribute("y", SVGRect.y);
rect.setAttribute("width", SVGRect.width);
rect.setAttribute("height", SVGRect.height);
rect.setAttribute("fill", "yellow");
ctx.insertBefore(rect, textElm);

The solution I have used is:
<svg>
<line x1="100" y1="100" x2="500" y2="100" style="stroke:black; stroke-width: 2"/>
<text x="150" y="105" style="stroke:white; stroke-width:0.6em">Hello World!</text>
<text x="150" y="105" style="fill:black">Hello World!</text>
</svg>
A duplicate text item is being placed, with stroke and stroke-width attributes. The stroke should match the background colour, and the stroke-width should be just big enough to create a "splodge" on which to write the actual text.
A bit of a hack and there are potential issues, but works for me!

Instead of using a <text> tag, the <foreignObject> tag can be used, which allows for XHTML content with CSS.

No, you can not add background color to SVG elements. You can do it programmatically with d3.
var text = d3.select("text");
var bbox = text.node().getBBox();
var padding = 2;
var rect = self.svg.insert("rect", "text")
.attr("x", bbox.x - padding)
.attr("y", bbox.y - padding)
.attr("width", bbox.width + (padding*2))
.attr("height", bbox.height + (padding*2))
.style("fill", "red");

Answer by Robert Longson (#RobertLongson) with modifications:
<svg width="100%" height="100%">
<defs>
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="yellow"/>
<feComposite in="SourceGraphic" operator="xor"/>
</filter>
</defs>
<text filter="url(#solid)" x="20" y="50" font-size="50"> solid background </text>
<text x="20" y="50" font-size="50">solid background</text>
</svg>
and we have no bluring and no heavy "getBBox" :)
Padding is provided by white spaces in text-element with filter.
It's worked for me

Going further with #dbarton_uk answer, to avoid duplicating text you can use paint-order=stroke style:
<svg>
<line x1="100" y1="100" x2="350" y2="100" style="stroke:grey; stroke-width: 100"/>
<text x="150" y="105" style="stroke:white; stroke-width:0.5em; fill:black; paint-order:stroke; stroke-linejoin:round">Hello World!</text>
</svg>
Note the stroke-linejoin:round which is needed to avoid seeing spikes for the W sharp angle.

You can combine filter with the text.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>SVG colored patterns via mask</title>
</head>
<body>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter x="0" y="0" width="1" height="1" id="bg-text">
<feFlood flood-color="white"/>
<feComposite in="SourceGraphic" operator="xor" />
</filter>
</defs>
<!-- something has already existed -->
<rect fill="red" x="150" y="20" width="100" height="50" />
<circle cx="50" cy="50" r="50" fill="blue"/>
<!-- Text render here -->
<text filter="url(#bg-text)" fill="black" x="20" y="50" font-size="30">text with color</text>
<text fill="black" x="20" y="50" font-size="30">text with color</text>
</svg>
</body>
</html>

For those wondering how to apply padding to a text element when it has a background like in the Robert's answer, do the following:
<svg>
<defs>
<filter x="-0.1" y="-0.1" width="1.2" height="1.2" id="solid">
<feFlood flood-color="#171717"/>
<feComposite in="SourceGraphic" operator="xor" />
</filter>
</defs>
<text filter="url(#solid)" x="20" y="50" font-size="50">Hello</text>
</svg>
In the example above, filter's x and y positions can be used as transform: translate(-10%, -10%) would, and width and height values can be read as 120% and 120%. So we made background 20% bigger, and offsetted it -10%, so background is now 10% bigger on each side of the text.

this is my favorite hack (not sure it should work). It refer an element that is not yet displayed, and it works pretty well
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 620 40" preserveAspectRatio="xMidYMid meet">
<defs>
<filter x="-0.02" y="0" width="1.04" height="1.1" id="removebackground">
<feFlood flood-color="#00ffff"/>
</filter>
</defs>
<!--Draw the text-->
<use xlink:href="#mygroup" filter="url(#removebackground)" />
<g id="mygroup">
<text id="text1" x="9" y="20" style="text-anchor:start;font-size:14px;">custom text with background</text>
<line x1="200" y1="18" x2="200" y2="36" stroke="#000" stroke-width="5"/>
<line x1="120" y1="27" x2="203" y2="27" stroke="#000" stroke-width="5"/>
</g>
</svg>

The previous answers relied on doubling up text and lacked sufficient whitespace.
By using atop and I was able to get the results I wanted.
This example also includes arrows, a common use case for SVG text labels:
<svg viewBox="-105 -40 210 234">
<title>Size Guide</title>
<defs>
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="white"></feFlood>
<feComposite in="SourceGraphic" operator="atop"></feComposite>
</filter>
<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z"></path>
</marker>
</defs>
<g id="garment">
<path id="right-body" fill="none" stroke="black" stroke-width="1" stroke-linejoin="round" d="M0 0 l30 0 l0 154 l-30 0"></path>
<path id="right-sleeve" d="M30 0 l35 0 l0 120 l-35 0" fill="none" stroke-linejoin="round" stroke="black" stroke-width="1"></path>
<use id="left-body" href="#right-body" transform="scale(-1,1)"></use>
<use id="left-sleeve" href="#right-sleeve" transform="scale(-1,1)"></use>
<path id="collar-right-top" fill="none" stroke="black" stroke-width="1" stroke-linejoin="round" d="M0 -6.5 l11.75 0 l6.5 6.5"></path>
<use id="collar-left-top" href="#collar-right-top" transform="scale(-1,1)"></use>
<path id="collar-left" fill="white" stroke="black" stroke-width="1" stroke-linejoin="round" d="M-11.75 -6.5 l-6.5 6.5 l30 77 l6.5 -6.5 Z"></path>
<path id="front-right" fill="white" stroke="black" stroke-width="1" d="M18.25 0 L30 0 l0 154 l-41.75 0 l0 -77 Z"></path>
<line x1="0" y1="0" x2="0" y2="154" stroke="black" stroke-width="1" stroke-dasharray="1 3"></line>
<use id="collar-right" href="#collar-left" transform="scale(-1,1)"></use>
</g>
<g id="dimension-labels">
<g id="dimension-sleeve-length">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="85" y1="0" x2="85" y2="120" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="85" y="60" class="dimension" text-anchor="middle" dominant-baseline="middle"> 120 cm</text>
</g>
<g id="dimension-length">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-85" y1="0" x2="-85" y2="154" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="-85" y="77" text-anchor="middle" dominant-baseline="middle" class="dimension"> 154 cm</text>
</g>
<g id="dimension-sleeve-to-sleeve">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-65" y1="-20" x2="65" y2="-20" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="0" y="-20" text-anchor="middle" dominant-baseline="middle" class="dimension"> 130 cm </text>
</g>
<g title="Back Width" id="dimension-back-width">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-30" y1="174" x2="30" y2="174" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="0" y="174" text-anchor="middle" dominant-baseline="middle" class="dimension"> 60 cm </text>
</g>
</g>
</svg>

An obvious workaround to the problem of the blur produced by the filter effect is to render the <text> two times: once for the background (with transparent characters) and once for the characters (without a background filter).
For me, this was the only way to make the text readable in Safari.
<svg width="100%" height="100%">
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="yellow" />
</filter>
<g transform="translate(20, 50)" font-size="50">
<text aria-hidden="true" fill="none" filter="url(#solid)">solid background</text>
<text fill="blue">solid background</text>
</g>
</svg>
The aria-hidden="true" attribute is there to prevent screen readers from speaking the text twice, if the user uses a screen reader.

You can add style to your text:
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
text-shadow: rgb(255, 255, 255) -2px -2px 0px, rgb(255, 255, 255) -2px 2px 0px,
rgb(255, 255, 255) 2px -2px 0px, rgb(255, 255, 255) 2px 2px 0px;"
White, in this example.
Does not work in IE :)

Javascript for Isometric image click isn't working?

I have created a cube with a few rectangles on the inside using illustrator and I wanted to use javascript and HTML to show the rectangles on the inside when someone hovers over the cube but nothing is working! Please help me.
My html is:
<html>
<head>
<meta charset="UTF-8">
<title>snap1.1</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/snap.svg.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<svg id="squares"></svg>
</body>
</html>
The javascript is:
$(document).ready(
function () {
var s = Snap("#squares");
Snap.load("./svg/hide_the_world.svg", function (data)
{
flatWorld = data.select("#flatWorld");
s.append(flatWorld);
hoverBoard = s.select("#hideSides");
world = s.select("#world");
leftSide = s.select("#left");
rightSide = s.select("#right");
topSide = s.select("#top");
//hoverBoard.hover(inBoard,outBoard);
//hoverBoard.click(hoverBoardClick);
world.click(clickWorld);
leftSide.click(clickLeft);
rightSide.click(clickRight);
topSide.click(clickTop);
}
);
var inWorld = function () {
}
var outWorld = function () {
$("#world").css("fill","green");
}
var clickTop = function () {
topSide.animate({ transform: 'translate( 0,-1000)' }, 1000, mina.easeinout );
}
var clickLeft = function () {
leftSide.animate({ transform: 'translate(-300,176)' }, 1000, mina.easeinout );
}
var clickRight = function () {
rightSide.animate({ transform: 'translate(300,176)' }, 1000, mina.easeinout );
}
var hoverBoardClick = function () {
hoverBoard.animate({'opacity': 0.0}, 250);
//hoverBoard.animate({ transform: 'translate( 0,-3000)' }, 1000, mina.easeinout );
}
var moveBoard = function () {
//alert("moveBoard");
hoverBoard.transform('translate(0,-1000)');
}
var inBoard = function () {
//alert("bob");
hoverBoard.animate({'opacity': 0.0}, 250, mina.easeinout, moveBoard);
}
var outBoard = function () {
hoverBoard.animate({'opacity': 1.0}, 250);
}
}
);
I'm not sure if you need my SVG code but here it is too:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="flatWorld" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-99 101 600 600" style="enable-background:new -99 101 600 600;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;stroke:#000000;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st1{fill:#FFFFFF;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:#FFFFFF;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st3{fill:none;stroke:#000000;stroke-miterlimit:10;}
.st4{fill:#AF6464;}
.st5{fill:#79C679;}
.st6{fill:#887AC4;}
.st7{fill:#655E8E;}
.st8{font-family:'SnellRoundhand';}
.st9{font-size:4.5217px;}
.st10{fill:#61C6C6;}
.st11{font-size:13.9783px;}
.st12{fill:#B8B9C1;}
.st13{font-family:'Noteworthy-Light';}
.st14{font-size:12px;}
.st15{fill:#659392;}
.st16{fill:#A1D672;}
</style>
<g>
<polygon class="st0" points="214,571.7 40.8,471.7 214,371.7 387.2,471.7 "/>
</g>
<g>
<polygon class="st1" points="214,571.7 40.8,471.7 40.8,271.7 214,371.7 "/>
<polygon class="st1" points="214,371.7 40.8,271.7 214,171.7 387.2,271.7 "/>
<polygon class="st1" points="387.2,471.7 214,571.7 214,371.7 387.2,271.7 "/>
</g>
<g>
<polygon class="st2" points="214,571.7 40.8,471.7 40.8,271.7 214,371.7 "/>
<polygon class="st2" points="214,371.7 40.8,271.7 214,171.7 387.2,271.7 "/>
<polygon class="st2" points="387.2,471.7 214,571.7 214,371.7 387.2,271.7 "/>
</g>
<path class="st2" d="M86.5,298c-4.1,6.8-7.9,13.8-11.6,20.9c-3.3,6.4-16.1,23.6-13,30.6c11.4,25.8,22.4,51.8,33.6,77.7
c4.4,19.3,8.9,38.5,13.3,57.8c0.1,4.5,55.5,7.8,61.2,12.8c14.4,12.5,28.7,28.6,44.8,38.8c2.4,1.5,17.8-15.3,19.5-16.9
c19.8-19.3,39.5-38.6,59.6-57.6c0,0,0.1-0.1,0.1-0.1c2-1.9,9.3-2.5,11.8-3.2c9.1-4.5,21.8-5.9,31.7-8.5c3.4-0.9,18.2-4.1,19.3-6.6
c0.4-1.1-1.1-4.8-1.3-5.9c-1.7-7.5-3.4-15-5.1-22.5c-4.3-19.3-8.7-38.6-13-57.8c-1.3-5.9-4.3-13.1-4.3-19.1c0-7.3,7.7-17.6,11-23.8
c4.7-9,9.6-18.2,15.1-26.6c-12.8-4.9-25.7-9.7-38.5-14.5c-5.7-2.2-11.5-4.3-17.2-6.5c-1.4-0.5-6.1-1.4-7-2.6
c-5.5-7.4-11-14.7-16.6-22.1c-4.2-5.5-8.3-11.1-12.5-16.6c-2.7-3.6-6.5-11.2-11.1-12.2c-16.3-3.5-32.5-7-48.8-10.6
c0,0-48.3,43.2-48.9,43.7c-1.3,1.2-8.2,0.9-9.9,1.1c-8.1,0-16,1.4-24,2.5c-4.8,0.7-5.3,0.7-8.4,4c-7.2,8-12.9,18.5-19,27.4
C93.3,286.9,89.8,292.4,86.5,298z"/>
<path class="st2" d="M120.1,257.8c-0.7,0.6-1.3,1.4-1.8,2.2c-9.5,13.6-19.1,27.1-28.6,40.7c-5.7,8.1-9.6,17.2-13.7,26.1
c-2.6,5.4-9.2,11.2-9,17.9c0.2,7.5,6.8,17.7,9.7,24.7c8.6,21,19.6,41.3,24.6,63.6c2.1,9.4,3.9,18.9,5.8,28.4
c0.8,4,0.2,13.3,3.6,15.9c1.3,1,3,1.4,4.6,1.7c12.4,2.5,24.9,5.2,37.3,7.8c5.8,1.2,12.5,1.8,18,3.9c4.8,1.8,43.5,36.6,44.4,36.1
c7.7-4.7,13.1-12.7,19.5-18.9c7.6-7.4,15.3-14.8,22.9-22.2c6.8-6.5,13.5-13.1,20.3-19.6c1.9-1.8,5.9-7.5,8.5-8.2
c0,0,60.7-16.3,60.7-16.3c-3-14.1-6.1-28.2-9.1-42.3c-2.4-11.2-4.8-22.5-7.3-33.7c-2-9.2-7-19.4-6.2-28.9c0.5-6.1,5.3-12.4,8.2-17.9
c3.1-5.7,6-11.5,9-17.2c1.1-2.2,4.9-6.7,4.9-9.1c0-2.9,0.4-1.3-1.4-3c-3.7-3.5-13-5.2-17.6-7.1c-5.1,0-13.3-5.3-18.1-7.3
c-4.8-1.9-11.6-3.2-15-7.4c-6.9-8.6-13.8-17.3-20.7-26c-5-6.3-8.4-14.5-14.8-19.6c-4.8-3.8-12-4.2-17.9-5.4
c-7.3-1.6-14.5-3.1-21.8-4.7c-2.8-0.6-6.8-3-9.7-2.5c-5.8,1.1-10.4,8.2-14.5,12c-5.3,4.9-10.8,9.5-16.2,14.3
c-3.7,0-14.6,13.1-17.3,15.6c-0.9,0.8-1.7,1.6-2.8,2.2c-5.7,3-16.7,2.1-23.1,2.7C130.8,256.5,123.7,254.9,120.1,257.8
C120.1,257.8,120.1,257.8,120.1,257.8z"/>
<line class="st3" x1="213.5" y1="212" x2="213.5" y2="372"/>
<line class="st3" x1="214" y1="371.7" x2="102.9" y2="433.9"/>
<line class="st3" x1="214" y1="371.7" x2="339.2" y2="442.8"/>
<rect x="135.9" y="269" class="st4" width="35.9" height="206"/>
<rect x="183" y="269" class="st5" width="35.9" height="206"/>
<rect x="231.1" y="269" class="st6" width="35.9" height="206"/>
<rect x="266.1" y="276" transform="matrix(0.9316 0.3635 -0.3635 0.9316 155.9605 -77.5507)" class="st7" width="35.9" height="199.3"/>
<rect x="135.9" y="279.6" class="st5" width="35.9" height="12.4"/>
<text transform="matrix(0.9373 0 0 1 141.0549 288.2795)" class="st8 st9">Half of my heart</text>
<rect x="183" y="449.7" class="st10" width="35.9" height="12.4"/>
<rect x="183" y="282.1" class="st10" width="35.9" height="12.4"/>
<text transform="matrix(1.146950e-02 -1.1451 0.9999 1.001592e-02 206.0669 400.9011)" class="st8 st11">BIBLE</text>
<rect x="231.1" y="279.6" class="st12" width="35.9" height="12.4"/>
<rect x="294.6" y="295.7" transform="matrix(0.9316 0.3634 -0.3634 0.9316 131.109 -93.0543)" class="st10" width="36.5" height="12.4"/>
<text transform="matrix(-7.525938e-03 1 -1 -7.525938e-03 242.3439 305.506)" class="st13 st14">The childrens book</text>
<rect x="277.6" y="340" transform="matrix(0.9316 0.3634 -0.3634 0.9316 146.0477 -83.8479)" class="st15" width="36.5" height="12.4"/>
<rect x="243.4" y="427.7" transform="matrix(0.9316 0.3634 -0.3634 0.9316 175.5866 -65.399)" class="st16" width="36.5" height="12.4"/>
<g id="hideSides">
<polygon id="left" class="st2" points="214,572 40.8,472 40.8,272 214,372 "/>
<polygon id="top" class="st2" points="214,372 40.8,272 214,172 387.2,272 "/>
<polygon id="right" class="st2" points="387.2,472 214,572 214,372 387.2,272 "/>
</g>
</svg>
Thank you so so much

how to unite path and change shape in svg

I drew two arcs that together can be a circle.
I could not unite them.
1 - How to combine them?
path-1 example path-1
example path-2
path1= d="M75,250 C 100,50 250,50 275,250"
path2= d="M 275,250 C 275,450 75,450 75,250"
I want to replace the triangle in a circle.
2 - how to do it?
tringle shape: d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" is inside the path.
Thanks..
my code:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line class="line_svg" x1="75" y1="100" x2="275" y2="100" />
<line class="line_svg" x1="75" y1="250" x2="275" y2="250" />
<line class="line_svg" x1="75" y1="100" x2="75" y2="400" />
<line class="line_svg" x1="175" y1="100" x2="175" y2="400" />
<line class="line_svg" x1="275" y1="100" x2="275" y2="400" />
<line class="line_svg" x1="75" y1="400" x2="275" y2="400" />
<path id="path1"
d="M 275,250 C 275,450 75,450 75,250" fill="none" stroke="blue" stroke-width="7.06" />
<circle cx="75" cy="250" r="18" fill="blue" />
<circle cx="175" cy="100" r="18" fill="blue" />
<circle cx="275" cy="250" r="18" fill="blue" />
<circle cx="175" cy="400" r="18" fill="blue" />
<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" >
<animateTransform
attributeName="transform"
begin="0s"
dur="10s"
type="rotate"
from="0 -100 -110"
to="360 150 150"
repeatCount="1" />
<animateMotion dur="11s" repeatCount="1" rotate="auto" >
<mpath xlink:href="#path1"/>
</animateMotion>
<circle id="pointA" cx="75" cy="250" r="5" />
</svg>​