How to embed svg into svg? - html

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>

Related

Rotate svg in a div container

I created an svg. Since I need to rotate it by 45degree, I wrapped it in a div that I transform with a rotation.
It works but the svg overflows the window.
Here the code:
.container {
background-color: tomato;
transform: rotate(45deg);
width: max-content;
}
<div class="container">
<svg width="200" height="200" x="0" y="0">
<rect x="0" y="0" width="100" height="100" fill="pink" stroke="black" />
<rect x="100" y="0" width="100" height="100" fill="white" stroke="black" />
<rect x="0" y="100" width="100" height="100" fill="white" stroke="black" />
<rect x="100" y="100" width="100" height="100" fill="white" stroke="black" />
</svg>
</div>
This is what I would like to obtain:

I would rotate just svg, because you don't need to rotate whole container. You still need add some padding because, when you rotate square it is longer left to right than before.
.container {
width: max-content;
padding: 50px;
}
svg {
transform: rotate(45deg);
}
<div class="container">
<svg width="200" height="200" x="0" y="0">
<rect x="0" y="0" width="100" height="100" fill="pink" stroke="black" />
<rect x="100" y="0" width="100" height="100" fill="white" stroke="black" />
<rect x="0" y="100" width="100" height="100" fill="white" stroke="black" />
<rect x="100" y="100" width="100" height="100" fill="white" stroke="black" />
</svg>
</div>

Any ideas on how to DRY code this navbar in React?

i'm creating a SPA using React and noticed that in the creation of my navbar there is going to be a lot of repetition. What i want is six components like this:
function Navbar() {
return (
<nav className="navbar">
<div className="navbar-items">
<Logo />
<NavbarItem1 />
<NavbarItem2 />
<NavbarItem3 />
<NavbarItem4 />
<NavbarItem5 />
</div>
</nav>
)
}
Now for the repetition part, every component is going to be basically this:
function NavbarItem1() {
return (
<div className="navbar-item">
<button className="navbar-button">
<svg class="navbar-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 80" x="0px" y="0px">
<g>
<path
d="M52,7a5.006,5.006,0,0,0-5-5H7A5.006,5.006,0,0,0,2,7V56H4V7A3,3,0,1,1,8,9.816V7H6V62H48V11.9A5.009,5.009,0,0,0,52,7ZM8,60V12H46V60ZM47,10H10.974a4.9,4.9,0,0,0,0-6H47a3,3,0,0,1,0,6Z" />
<path
d="M57,8a5.006,5.006,0,0,0-5,5V52.236l5,10,5-10V13A5.006,5.006,0,0,0,57,8ZM56,48.586,54.845,47.43,54,48.7V22h2Zm-1.846,3.486,1-1.5L57,52.414l1.845-1.844,1,1.5L57,57.764ZM60,48.7l-.845-1.267L58,48.586V22h2ZM60,20H54V18h6Zm-6-4V13a3,3,0,0,1,6,0v3Z" />
<rect x="12" y="20" width="30" height="2" />
<rect x="12" y="28" width="30" height="2" />
<rect x="12" y="35" width="30" height="2" />
<rect x="12" y="43" width="30" height="2" />
<rect x="12" y="50" width="18" height="2" />
<rect x="36" y="50" width="2" height="2" />
<rect x="32" y="50" width="2" height="2" />
<rect x="40" y="50" width="2" height="2" />
</g>
</svg>
<span class="navbar-text">Item 1</span>
</button>
</div>
)
}
So instead of creating six components who are basically the same, is there a less repetitive way of doing this or is this the normal way people create navbars using React?? Thanks in advance for your answer.

Assuming that the parts that differ between each navbar item are the icon and its text content, you can extract the icons into their own components, then just pass the icon component and the text via props:
// Pass className via props so the NavbarItem can set it
function NoteIcon({ className }) {
return (
<svg
className={className}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 64 80"
x="0px"
y="0px"
>
<g>
<path d="M52,7a5.006,5.006,0,0,0-5-5H7A5.006,5.006,0,0,0,2,7V56H4V7A3,3,0,1,1,8,9.816V7H6V62H48V11.9A5.009,5.009,0,0,0,52,7ZM8,60V12H46V60ZM47,10H10.974a4.9,4.9,0,0,0,0-6H47a3,3,0,0,1,0,6Z" />
<path d="M57,8a5.006,5.006,0,0,0-5,5V52.236l5,10,5-10V13A5.006,5.006,0,0,0,57,8ZM56,48.586,54.845,47.43,54,48.7V22h2Zm-1.846,3.486,1-1.5L57,52.414l1.845-1.844,1,1.5L57,57.764ZM60,48.7l-.845-1.267L58,48.586V22h2ZM60,20H54V18h6Zm-6-4V13a3,3,0,0,1,6,0v3Z" />
<rect x="12" y="20" width="30" height="2" />
<rect x="12" y="28" width="30" height="2" />
<rect x="12" y="35" width="30" height="2" />
<rect x="12" y="43" width="30" height="2" />
<rect x="12" y="50" width="18" height="2" />
<rect x="36" y="50" width="2" height="2" />
<rect x="32" y="50" width="2" height="2" />
<rect x="40" y="50" width="2" height="2" />
</g>
</svg>
);
}
function NavbarItem({ icon: Icon, children }) {
return (
<div className="navbar-item">
<button className="navbar-button">
<Icon className="navbar-icon" />
<span className="navbar-text">{children}</span>
</button>
</div>
);
}
function Navbar() {
return (
<nav className="navbar">
<div className="navbar-items">
<Logo />
{/* Pass the correct icon component, and the text via children */}
<NavbarItem icon={NoteIcon}>Item 1</NavbarItem>
<NavbarItem icon={OtherIcon}>Item 2</NavbarItem>
<NavbarItem icon={AnotherIcon}>Item 3</NavbarItem>
</div>
</nav>
);
}

How would I create an opaque coloured box with transparent text on top of a video?

I currently have this:
A Screenshot of current "model"
The background is a video, so it is supposed to make the text appear "alive".
I've done this through SVG, how do I change the background from black to white? Fill-opacity doesn't seem to work with other colors than black.
If this isn't possible, is there anyway do this this through CSS or Javascript?
<video autoplay muted loop poster="../billeder/Blue-Horizon.jpg" id="bgvid">
<source src="../video/Blue-Horizon.mp4" type="video/mp4">
<source src="../video/Blue-Horizon.webm" type="video/webm">
</video>
<svg viewbox="0 0 100 60">
<defs>
<mask id="mask" x="0" y="0" width="60" height="50">
<rect x="10" y="10" width="82" height="35" fill="#fff" stroke-opacity="0.8"/>
<text text-anchor="middle" x="51" y="35" dy="1" style="font-size:18px; font-weight: 900" opacity="1">SUMMER</text>
</mask>
</defs>
<rect x="5" y="15" width="95" height="30" mask="url(#mask)" fill-opacity="0.5"/>
</svg>

If you want the rect to be white, set its fill to white.
<svg viewBox="0 0 100 60">
<defs>
<mask id="mask" x="0" y="0" width="60" height="50">
<rect x="10" y="10" width="82" height="35" fill="#fff" stroke-opacity="0.8"/>
<text text-anchor="middle" x="51" y="35" dy="1" style="font-size:18px; font-weight: 900" opacity="1">SUMMER</text>
</mask>
</defs>
<image width="100" height="60" xlink:href="https://image.freepik.com/free-photo/sea-water_1160-2.jpg"/>
<rect x="5" y="15" width="95" height="30" mask="url(#mask)" fill="white" fill-opacity="0.5"/>
</svg>

Keep <text> element scaled inside <svg> with viewBox

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>

No display of image as a pattern in SVG circle

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>