I have to perform this task in which i have to embed one svg into another svg.
As I am new to SVG, I have done the polygon and rectangle part but while combining these two I am facing issues. I am attaching my work up to which I have completed.
Don't have a bunch of SVGs. Instead you should just put all your shapes into one big SVG.
Below is a quick example. But remember, you might find it easier to just use one of the many available vector drawing apps to create your SVG.
<!DOCTYPE html>
<html>
<body>
<svg width="550" height="400">
<g>
<rect width="300" height="30" style="fill:rgb(255,0,0);" />
<text x="10" y="20" fill="white">Fatality</text>
</g>
<g transform="translate(0,40)">
<rect width="300" height="30" style="fill:rgb(255,0,0);" />
<text x="10" y="20" fill="white">Lost Time Incidents</text>
</g>
<g transform="translate(0,80)">
<rect width="300" height="30" style="fill:rgb(255,128,0);" />
<text x="10" y="20" fill="white">Restricted Work Cases</text>
</g>
<g transform="translate(0,120)">
<rect width="300" height="30" style="fill:rgb(255,128,0);" />
<text x="10" y="20" fill="white">Medical Treatment Cases</text>
</g>
<g transform="translate(0,160)">
<rect width="300" height="30" style="fill:rgb(255,128,0);" />
<text x="10" y="20" fill="white">First Aid Cases</text>
</g>
<g transform="translate(0,200)">
<rect width="300" height="30" style="fill:rgb(255,128,0);" />
<text x="10" y="20" fill="white">RTA Incident</text>
</g>
<g transform="translate(0,240)">
<rect width="300" height="30" style="fill:rgb(255,128,0);" />
<text x="10" y="20" fill="white">Environment Incident</text>
</g>
<g transform="translate(0,280)">
<rect width="300" height="30" style="fill:rgb(102,204,0);" />
<text x="10" y="20" fill="white">Near Miss</text>
</g>
<g transform="translate(0,320)">
<rect width="300" height="30" style="fill:rgb(102,204,0);" />
<text x="10" y="20" fill="white">Unsafe Acts & Conditions</text>
</g>
<g transform="translate(0,360)">
<rect width="300" height="30" style="fill:rgb(102,178,255);" />
<text x="10" y="20" fill="white">Man Hours</text>
</g>
<polygon points="350,0, 550,400, 150,400" style="fill:white;stroke:black;stroke-width:1" />
</svg>
In order to embed one svg into another svg you have to use it the same way you would use a <symbol> element.
const SVG_NS = 'http://www.w3.org/2000/svg';
let colors = [
"rgb(255,128,0)",
"rgb(255,128,0)",
"rgb(255,128,0)",
"rgb(255,128,0)",
"rgb(255,128,0)",
"rgb(255,128,0)",
"rgb(255,128,0)",
"rgb(102,204,0)",
"rgb(102,204,0)",
"rgb(102,178,255)"
];
let angle = Math.atan2(215,430);
let n = 0;
let offset = 10;// distance between the border of the triangle and the start of the rectangle
for(let y = 40; y < 430; y+= 40){
let halfW = Math.tan(angle)*y - offset;
let o = {
x:430/2 - halfW,
y: y,
width: 2*halfW,
height: 30,
fill:colors[n]
}
drawRect(o, polys);
n++;
}
function drawRect(o, parent) {
let rect = document.createElementNS(SVG_NS, 'rect');
for (var name in o) {
if (o.hasOwnProperty(name)) {
rect.setAttributeNS(null, name, o[name]);
}
}
parent.appendChild(rect);
return rect;
}
svg{max-width:100vh}
<svg viewBox="0 0 600 600" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="400" height="30" y="40">
<rect width="300" height="30" style="fill:rgb(255,0,0);" />
<text x="0" y="15" fill="white">Fatality</text>
</svg>
<svg width="400" height="30" y="80">
<rect width="300" height="30" style="fill:rgb(255,0,0);" />
<text x="0" y="15" fill="white">Lost Time Incidents</text>
</svg>
<svg width="400" height="30" y="120">
<rect width="300" height="30" style="fill:rgb(255,128,0);" />
<text x="0" y="15" fill="white">Restricted Work Cases</text>
</svg>
<svg width="400" height="30" y="160">
<rect width="300" height="30" style="fill:rgb(255,128,0);" />
<text x="0" y="15" fill="white">Medical Treatment Cases</text>
</svg>
<svg width="400" height="30" y="200">
<rect width="300" height="30" style="fill:rgb(255,128,0);" />
<text x="0" y="15" fill="white">First Aid Cases</text>
</svg>
<svg width="400" height="30" y="240">
<rect width="300" height="30" style="fill:rgb(255,128,0);" />
<text x="0" y="15" fill="white">RTA Incident</text>
</svg>
<svg width="400" height="30" y="280">
<rect width="300" height="30" style="fill:rgb(255,128,0);" />
<text x="0" y="15" fill="white">Environment Incident</text>
</svg>
<svg width="400" height="30" y="320">
<rect width="300" height="30" style="fill:rgb(102,204,0);" />
<text x="0" y="15" fill="white">Near Miss</text>
</svg>
<svg width="400" height="30" y="360">
<rect width="300" height="30" style="fill:rgb(102,204,0);" />
<text x="0" y="15" fill="white">Unsafe Acts & Conditions</text>
</svg>
<svg width="400" height="30" y="400">
<rect width="300" height="30" style="fill:rgb(102,178,255);" />
<text x="0" y="15" fill="white">Man Hours</text>
</svg>
<svg id="polys" height="430" width="430" viewBox="0 0 430 430" x="160" >
<polygon points="215,0, 0,430 430,430 215,0" style="fill:white;stroke:red;stroke-width:1" />
</svg>
</svg>
I have code
<svg class="circle-chart in-view" version="1.1" viewBox="0 0 33.83098862 33.83098862" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle class="circle-chart-background" stroke="#efefef" stroke-width="2" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431"></circle>
<defs>
<pattern id="image2" patternUnits="userSpaceOnUse" height="100" width="100">
<image xlink:href="/hoangnguyenwp/wp-content/themes/hoangnguyenwp/images/web-shop.png" x="50%" y="50%" height="32" width="32" transform="translate(-35.5,-31)"></image>
</pattern>
</defs>
<circle class="circle-chart-circle circle-shop" stroke="#E91E63" stroke-width="2" stroke-linecap="round" fill="url(#image2)" cx="16.91549431" cy="16.91549431" r="15.91549431"></circle>
</svg>
with image inside circle
<defs>
<pattern id="image2" patternUnits="userSpaceOnUse" height="100" width="100">
<image xlink:href="/hoangnguyenwp/wp-content/themes/hoangnguyenwp/images/web-shop.png" x="50%" y="50%" height="32" width="32" transform="translate(-35.5,-31)"></image>
</pattern>
</defs>
but on mobile it's not show image
What's wrong with my code ?
I'm trying to put some text as labels inside some scaled elements, and the text is too big to fit in the container. What can I do here?
<div class="t_container">
<div class="t_x" style="position: relative;">
<svg position="absolute" viewBox="0 0 6 1" preserveAspectRatio="none">
<g>
<rect x="0" y="0" width="1" height="0.4"><title>Nov-21</title></rect>
<text x="0.5" y="0.5" fill="red">A<text>
</g>
<rect x="1" y="0" width="1" height="1"><title>Nov-22</title></rect>
<rect x="2" y="0" width="1" height="1"><title>Nov-23</title></rect>
<rect x="3" y="0" width="1" height="1"><title>Nov-24</title></rect>
<rect x="4" y="0" width="1" height="1"><title>Nov-25</title></rect>
<rect x="5" y="0" width="1" height="1"><title>Nov-26</title></rect></svg>
</div>
Here is a codepen with the result.
You have a very small custom viewport="0 0 6 1" size. 6px - width, 1px - height, so the font can not be displayed with such parameters.
I increased the size of the viewBox 100 times viewBox="0 0 600 100"
Squares for clarity painted in different colors. You can change their coloring according to your choice.
The text is placed inside the squares. I hope that's exactly what you wanted when you used the command
<title> Nov-24 </ title> inside the squares.
But the command <title> in SVG is a system tooltip, the information from which appears when you hover the cursor.
The size of the tooltip and its font can not be changed, so I added in the squares more tags <text> ... </ text>, the parameters of which you can change.
<div class="t_container">
<div class="t_x" style="position: relative;">
<svg position="absolute" viewBox="0 0 600 100" >
<g>
<rect x="0" y="0" width="100" height="40"><title>Nov-21</title></rect>
<text x="35" y="75" font-size="36" fill="red">A</text>
</g>
<rect x="100" y="0" width="100" height="100" fill="orange">
<title>Nov-22</title></rect>
<text x="125" y="55" font-size="18" fill="white">Nov-22</text>
<rect x="200" y="0" width="100" height="100" fill="orangered">
<title>Nov-23</title></rect>
<text x="225" y="55" font-size="18" fill="white">Nov-23</text>
<rect x="300" y="0" width="100" height="100" fill="green">
<title>Nov-24</title></rect>
<text x="325" y="55" font-size="18" fill="white">Nov-24</text>
<rect x="400" y="0" width="100" height="100" fill="dodgerblue">
<title>Nov-25</title></rect>
<text x="425" y="55" font-size="18" fill="white">Nov-25</text>
<rect x="500" y="0" width="100" height="100" fill="yellowgreen">
<title>Nov-26</title></rect>
<text x="525" y="55" font-size="18" fill="white">Nov-26</text>
</svg>
</div>
I am having a hard time applying a filter to an inline SVG symbol. I can make it work fine in a normal external SVG file but as soon as I make it inline with an HTML document, the filtered objects disappear. Is there anything I'm missing with the filter attribute? This fails for me in an up to date Chrome 57.
<html>
<body>
<svg style="display:none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="blur_inline">
<feGaussianBlur in="SourceGraphic" stdDeviation="3"/>
</filter>
<symbol id="filtered" width="80mm" height="50mm" viewBox="0 0 80 50" preserveAspectRatio="xMinYMin meet">
<rect id="a" x="0" y="10" width="30" height="20" fill="green"/>
<rect id="e" x="40" y="10" width="30" height="20" fill="blue" filter="url(#blur_inline)"/>
</symbol>
<symbol id="no_filter" width="80mm" height="50mm" viewBox="0 0 80 50" preserveAspectRatio="xMinYMin meet">
<rect id="a" x="0" y="10" width="30" height="20" fill="green"/>
<rect id="e" x="40" y="10" width="30" height="20" fill="blue"/>
</symbol>
</defs>
</svg>
<p>Symbol with a green and blurred blue box:</p>
<svg width="100mm" height="50mm">
<use xlink:href="#filtered" x="10" y="35" ></use>
</svg>
<p>Second symbol with no filter applied:</p>
<svg width="100mm" height="50mm">
<use xlink:href="#no_filter" x="10" y="35" ></use>
</svg>
</body>
</html>
Setting your SVG to display:none will make it non-functional because it disables all CSS.
<html>
<body>
<svg width="0" height="0">
<defs>
<filter id="blur_inline">
<feGaussianBlur in="SourceGraphic" stdDeviation="3"/>
</filter>
<symbol id="filtered" width="80mm" height="50mm" viewBox="0 0 80 50" preserveAspectRatio="xMinYMin meet">
<rect id="a" x="0" y="10" width="30" height="20" fill="green"/>
<rect id="e" x="40" y="10" width="30" height="20" fill="blue" filter="url(#blur_inline)"/>
</symbol>
<symbol id="no_filter" width="80mm" height="50mm" viewBox="0 0 80 50" preserveAspectRatio="xMinYMin meet">
<rect id="a" x="0" y="10" width="30" height="20" fill="green"/>
<rect id="e" x="40" y="10" width="30" height="20" fill="blue"/>
</symbol>
</defs>
</svg>
<p>Symbol with a green and blurred blue box:</p>
<svg width="100mm" height="50mm">
<use xlink:href="#filtered" x="10" y="35" ></use>
</svg>
<p>Second symbol with no filter applied:</p>
<svg width="100mm" height="50mm">
<use xlink:href="#no_filter" x="10" y="35" ></use>
</svg>
</body>
</html>
I'm trying to display an image in an svg circle in the context of an html page with the following lines :
<html>
<head>
</head>
<body>
<svg width="260" height="120">
<defs>
<pattern id="Triangle"
width="10" height="10"
patternUnits="userSpaceOnUse">
<polygon points="5,0 10,10 0,10"/>
</pattern>
<pattern id=Img"
width="100" height="100"
patternUnits="userSpaceOnUse">
<image x="0" y="0"
width="100%" height="100%"
xlink:href="corruscant.jpg"></image>
</pattern>
</defs>
<circle cx="60" cy="60" r="60"
fill="url(#Img)"
stroke="red"/>
<circle cx="200" cy="60" r="60"
fill="url(#Triangle)"
stroke="red"/>
</svg>
</body>
</html>
This 'should' work according to what I read on many documentations/examples/posts such as :
Add a background image (.png) to a SVG circle shape
SVG image inside circle
http://jsfiddle.net/UI_Designer/njr4fdhq/2/
But it doesn't. Triangles appear in the second circle, so svg structure is ok I guess..
I've tried to copy/paste the jsfiddle example but the landscape does not show itself.
I'm looking for elements that my naïve approach has not taken in account.
Thanks
<svg width="260" height="120">
<defs>
<pattern id="Triangle" width="10" height="10" patternUnits="userSpaceOnUse">
<polygon points="5,0 10,10 0,10" />
</pattern>
<pattern id="Img" width="100" height="100" patternUnits="userSpaceOnUse">
<image x="0" y="0" width="100%" height="100%" xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/46/A_Meat_Stall_with_the_Holy_Family_Giving_Alms_-_Pieter_Aertsen_-_Google_Cultural_Institute.jpg"></image>
</pattern>
</defs>
<circle cx="60" cy="60" r="60" fill="url(#Img)" stroke="red" />
<circle cx="200" cy="60" r="60" fill="url(#Triangle)" stroke="red" />
</svg>