I'd like to use CSS to set the fill of the bottom right circle to green.
The snippet below successfully colors entire shape to green, but I just want to color part of the shape (just the circle).
[row="2"] [col="b"] {fill: green;}
<svg>
<defs>
<symbol id="myShape">
<polygon points="0,0 40,0 20,20" />
<circle r="10" cx="10" cy="10" stroke="black" />
</symbol>
</defs>
<g row="1" translate="transform(0,0)">
<use col="a" xlink:href="#myShape" x="0" />
<use col="b" xlink:href="#myShape" x="50" />
</g>
<g row="2" transform="translate(0,50)">
<use col="a" xlink:href="#myShape" x="0" />
<use col="b" xlink:href="#myShape" x="50" />
</g>
</svg>
If you want something to always be a specific colour, then set it to be that colour explicitly.
[row="2"] [col="b"] {fill: green;}
[row="1"] [col="b"] {fill: blue;}
<svg>
<defs>
<symbol id="myShape">
<polygon points="0,0 40,0 20,20" fill="black" />
<circle r="10" cx="10" cy="10" stroke="black" />
</symbol>
</defs>
<g row="1" translate="transform(0,0)">
<use col="a" xlink:href="#myShape" x="0" />
<use col="b" xlink:href="#myShape" x="50" />
</g>
<g row="2" transform="translate(0,50)">
<use col="a" xlink:href="#myShape" x="0" />
<use col="b" xlink:href="#myShape" x="50" />
</g>
</svg>
Related
I generated a SVG using Adobe XD. They use transform for positioning things but the text in my mini computer screen is not always the same width (it is dynamically generated). I have tried anchored, anything I could find but it still didn't work. This is how it looks with the current code:
Here is the code:
<svg xmlns="http://www.w3.org/2000/svg" width="903.5" height="860.5" viewBox="0 0 1200 1041">
<g transform="translate(-397)">
<g
transform="translate(507 975)"
fill="#fff"
stroke="#707070"
strokeWidth="1"
>
<rect width="907" height="66" rx="33" stroke="none" />
<rect x="0.5" y="0.5" width="906" height="65" rx="32.5" fill="none" />
</g>
<rect width="119" height="395" transform="translate(901 613)" fill="#fff" />
<g
transform="translate(397)"
fill="#232323"
stroke="#fff"
stroke-width="30"
>
<rect width="1127" height="627" rx="103" stroke="none" />
<rect x="15" y="15" width="1097" height="597" rx="88" fill="none" />
</g>
<text
fill="white"
fontSize="96"
fontFamily="Fredoka"
>
{screenText}
</text>
</g>
</svg>
You can use transform/translate, text-anchor and dominant-baseline to place a text in the middle of something.
body {
background: gray;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1041">
<g
transform="translate(600 975)"
fill="#fff"
stroke="#707070"
stroke-width="1">
<rect x="-453.5" width="907" height="66" rx="33" stroke="none" />
<rect x="-454" y="0.5" width="906" height="65" rx="32.5" fill="none" />
</g>
<rect width="119" height="395" transform="translate(545.5 613)" fill="#fff" />
<g transform="translate(50)"
fill="#232323"
stroke="#fff"
stroke-width="30">
<rect width="1127" height="627" rx="103" stroke="none" />
<rect x="15" y="15" width="1097" height="597" rx="88" fill="none" />
</g>
<text
fill="#fff"
font-size="96"
font-family="Fredoka"
transform="translate(600 300)"
text-anchor="middle"
dominant-baseline="middle">
{screenText}
</text>
</svg>
Thanks to Buhan Yu's comment I learned that you need to specify x and y to center align it. I set x="50%" and it worked!
I have an SVG that I want to fit in a smaller box, while preserving all ratios. I'm trying to do this by nesting the SVG inside another SVG with smaller width/height and viewbox numbers, but instead of resizing, the image is getting cut out.
I've tried nesting the original SVG inside another SVG with different viewbox numbers.
Original SVG
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0.0" y="0.0" width="2060.0" height="1340.0" xml:space="preserve" viewBox="0.0 0.0 2060.0 1340.0">
<!-- The artwork image. -->
<image dragTarget="true" scaleTarget="true" dragConstraint="canvas-front-rect" scaleConstraint="canvas-front-rect" id="artwork-image" x="5" y="-100.0" width="2400" height="1500"
preserveAspectRatio="xMidYMid slice" xlink:href="https://www.printbit.com/wp-content/uploads/2017/06/happy-people.jpg" />
<!-- The "sides" -->
<g transform="scale(1, -1) translate(0, -140)" >
<use clip-path="url(#clip-path-top)" xlink:href="#artwork-image" />
</g>
<g transform="scale(1, -1) translate(0, -2540)" >
<use clip-path="url(#clip-path-bottom)" xlink:href="#artwork-image" />
</g>
<g transform="scale(-1, 1) translate(-140, 0)" >
<use clip-path="url(#clip-path-left)" xlink:href="#artwork-image" />
</g>
<g transform="scale(-1, 1) translate(-3980, 0)" >
<use clip-path="url(#clip-path-right)" xlink:href="#artwork-image" />
</g>
<!-- Constraint information -->
<rect id="canvas-front-rect" constraint="gte" x="70.0" y="70.0" width="1920.0" height="1200.0" stroke-width="1" stroke="#0000FF" fill="none" visibility="visible" />
<!-- Clip path definitions for the mirroring -->
<defs>
<clipPath id="clip-path-top"> <rect x="70.0" y="70.0" width="1920.0" height="70.0" stroke="#00FF00" fill="none"/> </clipPath>
<clipPath id="clip-path-bottom"> <rect x="70.0" y="1200.0" width="1920.0" height="70.0" stroke="#00FF00" fill="none"/> </clipPath>
<clipPath id="clip-path-left"> <rect x="70.0" y="70.0" width="70.0" height="1200.0" stroke="#00FF00" fill="none"/> </clipPath>
<clipPath id="clip-path-right"> <rect x="1920.0" y="70.0" width="70.0" height="1200.0" stroke="#00FF00" fill="none"/></clipPath>
</defs>
</svg>
and I'm trying to nest this inside of
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0.0"
y="0.0"
width="492.16"
height="406.83"
xml:space="preserve"
viewBox="0.0 0.0 492.16 406.83"
></svg>
Expected Result: I want the original SVG to show up as a smaller version of itself, with all ratios preserved.
Actual: However, instead of just resizing, the image gets cut out.
Take the width and height off the nested <svg/> element. Then it will adapt to the size of the parent.
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0.0"
y="0.0"
width="492.16"
height="406.83"
xml:space="preserve"
viewBox="0.0 0.0 492.16 406.83"
>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0.0" y="0.0" xml:space="preserve" viewBox="0.0 0.0 2060.0 1340.0">
<!-- The artwork image. -->
<image dragTarget="true" scaleTarget="true" dragConstraint="canvas-front-rect" scaleConstraint="canvas-front-rect" id="artwork-image" x="5" y="-100.0" width="2400" height="1500"
preserveAspectRatio="xMidYMid slice" xlink:href="https://www.printbit.com/wp-content/uploads/2017/06/happy-people.jpg" />
<!-- The "sides" -->
<g transform="scale(1, -1) translate(0, -140)" >
<use clip-path="url(#clip-path-top)" xlink:href="#artwork-image" />
</g>
<g transform="scale(1, -1) translate(0, -2540)" >
<use clip-path="url(#clip-path-bottom)" xlink:href="#artwork-image" />
</g>
<g transform="scale(-1, 1) translate(-140, 0)" >
<use clip-path="url(#clip-path-left)" xlink:href="#artwork-image" />
</g>
<g transform="scale(-1, 1) translate(-3980, 0)" >
<use clip-path="url(#clip-path-right)" xlink:href="#artwork-image" />
</g>
<!-- Constraint information -->
<rect id="canvas-front-rect" constraint="gte" x="70.0" y="70.0" width="1920.0" height="1200.0" stroke-width="1" stroke="#0000FF" fill="none" visibility="visible" />
<!-- Clip path definitions for the mirroring -->
<defs>
<clipPath id="clip-path-top"> <rect x="70.0" y="70.0" width="1920.0" height="70.0" stroke="#00FF00" fill="none"/> </clipPath>
<clipPath id="clip-path-bottom"> <rect x="70.0" y="1200.0" width="1920.0" height="70.0" stroke="#00FF00" fill="none"/> </clipPath>
<clipPath id="clip-path-left"> <rect x="70.0" y="70.0" width="70.0" height="1200.0" stroke="#00FF00" fill="none"/> </clipPath>
<clipPath id="clip-path-right"> <rect x="1920.0" y="70.0" width="70.0" height="1200.0" stroke="#00FF00" fill="none"/></clipPath>
</defs>
</svg>
</svg>
I'm trying to use an svg def tag to show some dimensions in a creative manner.
For an example, I have below example svg def.
<svg>
<defs>
<g id="aaa" stroke-opacity="null" stroke-width="0" stroke-linecap="null" stroke-linejoin="null" fill="#6bfc46" >
<circle cx="300" cy="400" r="30" />
<rect x="300" y="400" width="30" height="30" />
<circle cx="300" cy="400" r="25" fill="#ffffff" />
<text x="300" y="400" text-anchor="middle" stroke="#6bfc46" stroke-width="2px" dy=".3em">5</text>
</g>
</defs>
<svg/>
What I need to achieve is I should be able to use this defined text in different locations as below.
<use xlink:href="#aaa" x="480" y="550" changing_text="3">
<use xlink:href="#aaa" x="580" y="650" changing_text="9">
My Question is
1) Is this possible with SVG ?
2) How can we achieve this ?
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>
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>
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.
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 :)
So, I've been asked to create a static SVG file, and have been told to use <defs> and <use> to make it more efficient.
I understand there is code repetition but I'm not sure how to go about reducing what I have and still being able to have the same output.
Here is the code:
<!DOCTYPE html>
<html>
<body>
<center>
<h1>Static SVG</h1>
<svg width="200" height="200">
<!--transforming the group of shapes so that the origin is at the center of the svg image-->
<g transform="translate(100,100)">
<!--This is effectively the background-->
<rect x="-100" y="-100" width="200" height="200" style="fill:grey" />
<!--Inner rounded rectangle-->
<rect x="-40" y="-40" rx="5" ry="5" width="80" height="80" style="fill:black" />
<!--Four inner-most short arrows-->
<polygon points="0,-60 10,-50 0,-55 -10,-50" style="fill:black;stroke:lime;stroke-width:1" />
<polygon points="60,0 50,-10 55,0 50,10" style="fill:black;stroke:lime;stroke-width:1" />
<polygon points="-60,0 -50,10 -55,0 -50,-10" style="fill:black;stroke:lime;stroke-width:1" />
<polygon points="0,60 10,50 0,55 -10,50" style="fill:black;stroke:lime;stroke-width:1" />
<!--Middle short arrows-->
<polygon points="0,-80 10,-70 0,-75 -10,-70" style="fill:red;stroke:black;stroke-width:1" />
<polygon points="80,0 70,-10 75,0 70,10" style="fill:red;stroke:black;stroke-width:1" />
<polygon points="-80,0 -70,10 -75,0 -70,-10" style="fill:red;stroke:black;stroke-width:1" />
<polygon points="0,80 10,70 0,75 -10,70" style="fill:red;stroke:black;stroke-width:1" />
<!--Outer-most short arrows-->
<polygon points="0,-100 10,-90 0,-95 -10,-90" style="fill:lime;stroke:black;stroke-width:1" />
<polygon points="100,0 90,-10 95,0 90,10" style="fill:lime;stroke:black;stroke-width:1" />
<polygon points="-100,0 -90,10 -95,0 -90,-10" style="fill:lime;stroke:black;stroke-width:1" />
<polygon points="0,100 10,90 0,95 -10,90" style="fill:lime;stroke:black;stroke-width:1" />
<!--Longer Arros positioned diagonally from origin-->
<polygon points="40,50 50,50 50,40 60,60" style="fill:yellow;stroke:black;stroke-width:1" />
<polygon points="-50,-40 -50,-50 -40,-50 -60,-60" style="fill:yellow;stroke:black;stroke-width:1" />
<polygon points="50,-40 50,-50 40,-50 60,-60" style="fill:yellow;stroke:black;stroke-width:1" />
<polygon points="-50,40 -50,50 -40,50 -60,60" style="fill:yellow;stroke:black;stroke-width:1" />
<!--The elliptical shape in the centre of the rounded Square-->
<ellipse cx="0" cy="0" rx="20" ry="40" style="fill:white" />
</g>
</svg>
</center>
</body>
</html>
You're drawing the same polygons for the most part albeit rotated and positioned differently.
Along with moving their styles into a class, you can use defs and use like this:
<defs>
<!-- Define your shape here once -->
<polygon points="0,-60 10,-50 0,-55 -10,-50"
class="inner-arrow" id="inner-arrow" />
</defs>
<!-- Reuse multiple times
with the rotation (and translation if needed) handled by transform -->
<use xlink:href="#inner-arrow" />
<use xlink:href="#inner-arrow" transform="rotate(90)" />
<use xlink:href="#inner-arrow" transform="rotate(180)" />
<use xlink:href="#inner-arrow" transform="rotate(270)" />
Here's a DEMO that has the first inner arrows' code updated.
You can use and reuse symbols, which can have individual viewBoxes and be rotated and scaled like groups. The units in the symbols are proportional to the viewBox.
Here is a JSFiddle with your arrows coded and grouped using symbols:
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<symbol id="sm_arrow" viewBox="0 0 20 10">
<polygon points="10,0 20,10 10,5 0,10" />
</symbol>
<symbol id="lg_arrow" viewBox="0 0 200 200">
<polygon points="0,10 10,10 10,0 20,20" />
</symbol>
<symbol id="triple_arrow" viewBox="0 5 200 10">
<use xlink:href="#sm_arrow"/>
<use xlink:href="#sm_arrow" transform="translate(0,20)" />
<use xlink:href="#sm_arrow" transform="translate(0,40)" />
</symbol>
<symbol id="arrows" viewBox="0 0 200 200">
<g id="small_arrows">
<use xlink:href="#triple_arrow" transform="translate(0,-90)" />
<use xlink:href="#triple_arrow" transform="translate(290,0) rotate(90)" />
<use xlink:href="#triple_arrow" transform="translate(200,290) rotate(180)" />
<use xlink:href="#triple_arrow" transform="translate(-90,200) rotate(-90)" />
</g>
<g id="long_arrows" transform="translate(60,60)">
<use xlink:href="#lg_arrow" transform="translate(80,80)" />
<use xlink:href="#lg_arrow" transform="translate(0,80) rotate(90)" />
<use xlink:href="#lg_arrow" transform="rotate(180)" />
<use xlink:href="#lg_arrow" transform="translate(80,0) rotate(-90)" />
</g>
</symbol>
<g id="background">
<rect width="200" height="200"/>
<rect x="60" y="60" rx="5" ry="5" width="80" height="80"/>
<ellipse cx="100" cy="100" rx="20" ry="40"/>
</g>
</defs>
<use xlink:href="#background"/>
<use xlink:href="#arrows"/>
</svg>
The styles were transferred to a CSS block or file:
polygon {
stroke-width: 1;
}
#triple_arrow use:nth-child(1) {
fill:black;
stroke:lime;
}
#triple_arrow use:nth-child(2) {
fill: red;
stroke: black;
}
#triple_arrow use:nth-child(3) {
fill: lime;
stroke: black;
}
#lg_arrow {
fill:yellow;
stroke:black;
}
#background rect:nth-child(1) {
fill:grey;
}
#background rect:nth-child(2) {
fill:black;
}
#background ellipse {
fill:white;
}