Draw a crescent moon using SVG in HTML - html
Is it possible to draw a crescent moon using SVG in HTML?
I've been trying things out at W3 Schools but I don't see an example of this. I don't need any of the shading that you see in typical google images of 'crescent moon', just a solid border crescent moon.
Rather than drawing three circles you can draw a path with two arcs:
<path d="M50 20A40 40 0 1 0 50 70 30 30 0 1 1 50 20z" stroke="black" stroke-width="2" fill="red"/>
This reads as
M 50 20
Move to position (50, 20)
A 40 40 0 1 0 50 70
Draw an arc from that point to position (50, 70). The arc should have a radius of 40 in the x-axis and 40 in the y axis.
30 30 0 1 1 50 20
Draw another arc in the opposite direction from the current point to (50, 20) with a radius of 30 in both axes.
z Join the ends nicely
For more information see SVG specification
Please note that my solution might not be the best. I am not an expert when it comes to vector graphics and you should definitely look for other solution
The approach I took is to draw another image with the same background. It will look like:
To Eliminate the extra border I draw another circle above it
Now Set the 3rd image border to white it will look like:
If you are not using borders you only need to use 2 circles
You might also wanna take a look at clipping and masking. It might be a better approach.
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
<circle cx="115" cy="50" r="30" stroke="black" stroke-width="2" fill="white" />
<circle cx="130" cy="50" r="23" stroke="white" stroke-width="2" fill="white" />
</svg>
</body>
</html>
Side note : W3Schools isn't really the reference you should be relying on. It's full of wrong information and outdated stuff. Better resources include:
Mozilla developers network
Web Platform
I found the existing answers lacked the poetry of an Easter Egg, were not based on science and were not that user friendly.
Here is an icon I built for 'dark mode':
<svg id="moon" viewBox="-6 -6 12 12">
<title>Dark mode</title>
<defs>
<mask id="earth">
<rect fill="white" x="-5" y="-5" width="10" height="10"></rect>
<circle fill="black" cx="3.141592654" r="5"/>
</mask>
</defs>
<circle r="5" fill="currentColor" mask="url(#earth)" transform="rotate(-23.5)"/>
</svg>
Things to know:
The viewbox is centered
Width and height is not provided as this is a vector graphic that scales
Scale can be specified in CSS
The standard svg namespace definition is not needed in evergreen browsers
the mask is an offset circle, offset by pi just for to pay homage to the circle
the icon is tilted by 23.5 degrees as that is the tilt of the earth
the id tags are sensibly named, 'earth' for the mask and 'moon' for the icon
the fill is currentColor so that the icon is black on a white page and white on a black page
for brevity the origin of the circles is not given as this defaults to the centre of the viewbox, with the viewbox having a negative origin
if a fixed size is needed then width and height can be added
if used inline in a document as a clickable icon then the CSS needs to have pointer-events: bounding-box specified so that there is a click area
for usability you can change the <title> to be what you want
the viewbox includes padding, to increase it change the viewbox accordingly
the icon should weigh in at a lot less than 256 bytes
If Easter Eggs are morally wrong in your workplace and you can't inline your SVGs then you can save this oneliner as an image and use it that way:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="-6 -6 12 12"><defs><mask id="a"><rect width="10" height="10" x="-5" y="-5" fill="#fff"/><circle cx="3" r="5"/></mask></defs><circle r="5" fill="currentColor" mask="url(#a)" transform="rotate(-23)"/></svg>
This looks the same at icon size even though there are no floating point numbers.
If you want to use the icon inline in your CSS rather than your document (keeping presentation out of markup) then you can specify a CSS variable with the SVG content and then use that in a pseudo selector.
In your script for changing to 'dark mode' you can update the CSS variable or if you want some informative text as well then you can do the usual add a class to hide it method, e.g.::
[].map.call(document.querySelectorAll('button'), function (event) {
event.addEventListener("click", function (event) { [].map.call(document.querySelectorAll('button'), function (el) {
el.classList.toggle('hide');
});
});
});
:root {
--icon-moon-dark: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-6 -6 12 12"> \
<defs> \
<mask id="earth"> \
<rect fill="white" x="-5" y="-5" width="10" height="10"></rect> \
<circle fill="black" cx="3.141592654" r="5"/> \
</mask> \
</defs> \
<circle r="5" fill="white" mask="url(%23earth)" transform="rotate(-23.5)"/> \
</svg>');
--icon-moon-light: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-6 -6 12 12"> \
<defs> \
<mask id="earth"> \
<rect fill="white" x="-5" y="-5" width="10" height="10"></rect> \
<circle fill="black" cx="3.141592654" r="5"/> \
</mask> \
</defs> \
<circle r="5" fill="black" mask="url(%23earth)" transform="rotate(-23.5)"/> \
</svg>');
}
.hide {
display: none;
}
nav > button {
padding:0;
font-size: x-large;
}
#dark-mode span {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
grid-auto-flow: column;
text-transform: uppercase;
font-family: fantasy;
padding: .5em 1em;
}
#dark-mode span::before {
content: var(--icon-moon-light);
width: 1.5em;
height: 1.5em;
}
#light-mode span {
background: black;
color: white;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
grid-auto-flow: column;
text-transform: uppercase;
font-family: cursive;
padding: .5em 1em;
}
#light-mode span::before {
content: var(--icon-moon-dark);
width: 1.5em;
height: 1.5em;
}
<nav><button id="dark-mode" class="hide"><span>Light mode</span></button>
<button id="light-mode"><span>Dark mode</span></button><nav>
Here's a JS/CSS solution that doesn't require SVG, in case it's useful to anyone:
http://codebox.org.uk/pages/html-moon-planet-phases
(disclaimer - I wrote it)
For the records: CSS only version (no need for SVG) (updated with solid border)
http://jsfiddle.net/KA3yp/1/
HTML:
<div class="crescent"></div>
CSS:
.crescent {
width: 300px;
height: 300px;
background-color: #f00;
border-radius:150px;
position: relative;
}
.crescent:before {
content: "";
width:220px;
height: 220px;
display: block;
position: absolute;
border-radius: 110px;
right: -5px;
top: 40px;
background: #fff;
border: 2px solid #000;
}
.crescent:after {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 100px;
content: "";
display: block;
height: 140px;
position: absolute;
right: -18px;
top: 83px;
width: 140px;
}
I use Raphael.js to draw this moon here: http://jsfiddle.net/franky85/SX3g8/
Or use the code like this:
var paper = Raphael(0, 0, "100%", "100%");
var backgroundColor = 'white';
var moonColor = 'darkorange';
var c = paper.circle(50, 50, 40).attr({
fill: moonColor,
'stroke-width': 0
});
var e = paper.ellipse(50, 50, 20, 40).attr({
fill: backgroundColor,
'stroke-width': 0
});
var r = paper.rect(50, 10, 40, 80).attr({
fill: backgroundColor,
'stroke-width': 0
});
var set = paper.set();
set.push(c);
set.push(e);
set.push(r);
For more complex SVG draw, you'd better use Raphael.js lib.
The document of Raphael.js is here: http://raphaeljs.com/reference.html
Related
How to extend an SVG graphic downwards filling the page?
In HTML, I am trying to use SVG graphics to create a background section to a part of my site. It uses a curve that sections off a part of the website to another. I have managed to create a basic outline for the general shape of the SVG: Picture of the animated banner and SVG page section. However, I am expecting the SVG element to be stretched downwards so it fills out the rest of the page. This is not the case however as when scrolling down the SVG ends and the background takes up the rest of the site: The SVG is too small. I need help extending the SVG to fill the rest of the page underneath it. Current HTML Code: div class="wave"> <svg width="100%" height="200px" fill="none" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path fill="white" d=" M0 67 C 273,183 822,-90 2525.01,98 V 359 H 0 V 67 Z"> </path> </svg> </div> I have tried to change the SVG values but they normally just turn the graphic out of shape. I would like help understanding how to understand and fix this problem. Futhermore, how to use the SVG viewBox to preserve the aspect ratio of the graphic? [Update] Here is the website so far. I need to move the SVG graphic downwards as indicated in the arrow so the black particle background is above it: Picture Update
The problem here is you can (see thereafter) "fill" till the end of page, now that means playing with viewport and aspect ratio as said Robert. That means also your "curve" won't be constant regarding different sizes of screen.
Check and play with the snippet thereafter:
.wave {
width: 100vw;
height: 100vh;
}
<div class="wave">
<svg width="auto" height="100%" fill="none" viewbox="0 0 512 128" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin slice">
<path
fill="red"
d="M 0,75 C 158.44341,97.135847 296.6677,25.650819 512,25 V 128 H 0 Z">
</path>
</svg>
</div>
perhaps this can work for you
you have your wave, plus a rect under
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
.wave {
width: 100%;
height: 100%;
}
<div class="wave">
<svg width="auto" height="100%" fill="#ff0000" viewbox="0 0 512 128" xmlns="http://www.w3.org/2000/svg">
<path d="M 0,75 C 158.44341,97.135847 296.6677,25.650819 512,25 V 128 H 0 Z"></path>
<rect width="512" height="129" x="0" y="127" />
</svg>
</div>
I thought about your problem.
If the idea is to have an image fullscreen on home with a wave svg down with a color and continuity same color in other part. An idea would be the following:
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
section {
min-height: 100vh;
background-color: #999999;
margin: 0;
}
section h2 {
margin: 0;
}
#home {
margin: 0;
padding: 0;
width: 100vw;
background-image: url("https://picsum.photos/1920/1080");
background-size: cover;
background-position: center;
position: relative;
}
#home .title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #7b98bc;
}
.wave {
width: 100%;
height: 100vh;
}
.wave svg {
display: inline-block;
}
<section id="home">
<div class="wave">
<svg width="100%" height="auto" fill="#999999" viewbox="0 0 512 128" preserveAspectRatio="xMinYMax meet" xmlns="http://www.w3.org/2000/svg">
<path d="M 0,75 C 158.44341,97.135847 296.6677,25.650819 512,25 V 128 H 0 Z"/>
</svg>
</div>
<div class="title">
<h2>Title of my website</h2>
</div>
</section>
<section id="part1">
<h2>here we are section part1</h2>
</section>
Pie chart using circle element
I am trying to create a pie chart using circle element in svg. I am able to fill values to 60%, 30% and 10% but all the circle starting from same position.
How can I make next circle start from where previous one ended?
svg { transform: rotate(-90deg); }
circle {
stroke-width: 3;
stroke-opacity: 1;
fill: none;
}
circle.stroke-yellow {
stroke: yellow;
stroke-dasharray: calc(2*3.14*50*60/100),calc(2*3.14*50);
}
circle.stroke-red {
stroke: red;
stroke-dasharray: calc(2*3.14*50*30/100),calc(2*3.14*50);
}
circle.stroke-blue {
stroke: blue;
stroke-dasharray: calc(2*3.14*50*10/100),calc(2*3.14*50);
}
<svg xmlns="http://www.w3.org/2000/svg" height="220">
<circle class="stroke-yellow" cy="110" cx="110" r="50"></circle>
<circle class="stroke-red" cy="110" cx="110" r="50"></circle>
<circle class="stroke-blue" cy="110" cx="110" r="50"></circle>
</svg>
Also stroke-width is not working which I mentioned in CSS.
As #enxaneta mentioned: you will need to give each pie segment an offset by changing the dash-offset property.
Based on your code example:
svg {
transform: rotate(-90deg);
}
circle {
stroke-width: 3;
stroke-opacity: 1;
fill: none;
}
.stroke {
stroke-width: 100;
--circumference: 314.159
}
circle.stroke-blue {
stroke: blue;
stroke-dasharray: calc( var(--circumference) * 10 / 100), var(--circumference);
stroke-dashoffset: 0;
}
circle.stroke-red {
stroke: red;
stroke-dasharray: calc( var(--circumference) * 30 / 100), var(--circumference);
stroke-dashoffset: calc( 0 - var(--circumference) * 10 / 100);
}
circle.stroke-yellow {
stroke: yellow;
stroke-dasharray: calc( var(--circumference) * 60 / 100), var(--circumference);
stroke-dashoffset: calc( 0 - var(--circumference) * 40 / 100);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 220" height="220">
<circle class="stroke stroke-blue stroke-10" cy="110" cx="110" r="50" />
<circle class="stroke stroke-yellow stroke-60" cy="110" cx="110" r="50" />
<circle class="stroke stroke-red stroke-30" cy="110" cx="110" r="50" />
</svg>
stroke-width needs to be '100' (radius*2);
Drawbacks:
Firefox seems to have problems, rendering svg elements when attributes are are calculated via css calc() (SVG pie-chart working only in Chrome, not in Firefox)
difficult to be reused for multiple pi chart instances
Recommendations:
simplify your calculations by optimizing your svg geometry.
control your values (e.g pie percentages, colors) via HTML/svg attributes (or css variables)
Example showing 2 slightly different svg setups:
body{
font-family: arial;
font-size:10px;
}
.icon-wrp {
position: relative;
display: inline-block;
width: 200px;
vertical-align: top;
}
.icon-wrp p{
font-size:12px;
}
<!--simple pi -->
<div class="icon-wrp">
<svg class="svgPieAsset" viewBox="0 0 63.6619772368 63.6619772368">
<symbol id="slice">
<circle transform="rotate(-90 31.8309886184 31.8309886184)" id="circle" class="percent" cx="50%" cy="50%" r="15.9154943092" fill="none" stroke-width="31.8309886184" />
</symbol>
<!--actual pi slices -->
<use class="segment" href="#slice" stroke="green" stroke-dashoffset="0" stroke-dasharray="30 100" />
<use class="segment" href="#slice" stroke="orange" stroke-dashoffset="-30" stroke-dasharray="60 100" />
<use class="segment" href="#slice" stroke="purple" stroke-dashoffset="-90" stroke-dasharray="10 100" />
</svg>
<p>1. Precice geometry based on PI. <br>Should be rendered fine on all browsers.</p>
</div>
<div class="icon-wrp">
<svg class="svgPieAsset" viewBox="0 0 100 100">
<symbol id="slice2">
<circle transform="rotate(-90 50 50)" id="circle" class="percent" cx="50%" cy="50%" r="25" fill="none" stroke-width="50%" pathLength="100" />
</symbol>
<!--actual pi slices -->
<use class="segment" href="#slice2" stroke="green" stroke-dashoffset="0" stroke-dasharray="30 100" />
<use class="segment" href="#slice2" stroke="orange" stroke-dashoffset="-30" stroke-dasharray="60 100" />
<use class="segment" href="#slice2" stroke="purple" stroke-dashoffset="-90" stroke-dasharray="10 100" />
</svg>
<p>2. Using pathLength="100". <br>Might show a tiny gap on chromium based browsers.</p>
</div>
1. left example: Is using a precice (PI based) circle geometry
The desired circumference of the circle element should be 100 svg units.
Therfore we'll need to set the ideal values like so:
radius: 15.91549430919 (100/2π)
stroke-width: 31.8309886184 (2r)
vieBox width/height: 63.6619772368 (4r)
2. right example: Is using pathLength="100"
PathLength allows us to use any circle dimensions by setting the path's length computation value to "100".
Unfortunately, you might encounter rendering imprecisions on some browsers (e.g. chromium based) resulting in visible gaps between pie segments.
Quite likely, this issue will be fixed in future versions of chromium.
Display pie segments
Eitherway, you can now easily display a percentage based pie segment/slice by setting a stroke dash length value:
Example 30% dash length; offset. 0 (since it's the first segment):
<circle stroke-dashoffset="0" stroke-dasharray="30 100" cx="50%" cy="50%" r="15.9154943092" fill="none" stroke-width="31.8309886184" />
Adding pie segments:
You'll need to decrement (as we need negative values) the dash-offset values progressively by subtracting the previous dash length (percentage):
0, -30, -90
Example: 60% dash length; offset. -30
<circle stroke-dashoffset="-30" stroke-dasharray="60 100" cx="50%" cy="50%" r="15.9154943092" fill="none" stroke-width="31.8309886184" />
Example optimized for reusability (using css variables)
.icon-wrp {
position: relative;
display: inline-block;
width: 200px;
vertical-align: top;
}
.chart {
width: 1em;
height: 1em;
font-size: var(--chartFontSize);
}
.segment {
stroke-dasharray: var(--percent) 100;
stroke-dashoffset: var(--offset);
stroke: var(--strokeColor);
}
.chartAni .segment {
animation-name: progress;
animation-fill-mode: forwards;
animation-delay: 0.3s;
animation-duration: 0.5s;
transition: 0.3s;
stroke-dasharray: 0 100;
}
#keyframes progress {
from {
stroke-dasharray: 0 100;
stroke-dashoffset: 0;
}
to {
stroke-dasharray: var(--percent) 100;
stroke-dashoffset: var(--offset);
}
}
<!-- pie asset – hidden -->
<svg class="svgPieAsset" style="display:none" viewBox="0 0 63.6619772368 63.6619772368">
<symbol id="slice" viewBox="0 0 63.6619772368 63.6619772368">
<circle transform="rotate(-90 31.8309886184 31.8309886184)" id="circle" class="percent" cx="31.8309886184" cy="31.8309886184" r="15.9154943092" fill="none" stroke-width="31.8309886184" />
</symbol>
</svg>
<!-- visible pie chart -->
<div class="icon-wrp">
<svg id="pieChart01" class="chart chartAni" style="--chartFontSize:20vw">
<use class="segment" href="#slice" style="--offset:-0; --percent:33.333; --strokeColor:green" />
<use class="segment" href="#slice" style="--offset:-33.333; --percent:33.333; --strokeColor:purple" />
<use class="segment" href="#slice" style="--offset:-66.666; --percent:33.333; --strokeColor:gray" />
</svg>
</div>
Edit: donut chart example
For a donut chart or a circular gauge – just adjust the stroke-width to your needs.
.icon-wrp {
position: relative;
display: inline-block;
width: 200px;
vertical-align: top;
}
.chart {
width: 1em;
height: 1em;
font-size: var(--chartFontSize);
}
.segment {
stroke-dasharray: var(--percent) 100;
stroke-dashoffset: var(--offset);
stroke: var(--strokeColor);
}
.chartAni .segment {
animation-name: progress;
animation-fill-mode: forwards;
animation-delay: 0.3s;
animation-duration: 0.5s;
transition: 0.3s;
stroke-dasharray: 0 100;
}
#keyframes progress {
from {
stroke-dasharray: 0 100;
stroke-dashoffset: 0;
}
to {
stroke-dasharray: var(--percent) 100;
stroke-dashoffset: var(--offset);
}
}
<!-- pie asset – hidden -->
<svg class="svgPieAsset" style="display:none;" >
<symbol id="slice" viewBox="0 0 33 33">
<circle id="circle" class="percent" cx="50%" cy="50%" r="15.9154943092" fill="none" stroke-width="0.95" />
</symbol>
</svg>
<!-- visible pie chart -->
<div class="icon-wrp">
<svg id="pieChart01" class="chart chartAni" style="--chartFontSize:20vw; transform:rotate(-90deg);">
<use class="segment" href="#slice" style="--offset:0; --percent:10; --strokeColor:blue" />
<use class="segment" href="#slice" style="--offset:-10; --percent:30; --strokeColor:red" />
<use class="segment" href="#slice" style="--offset:-40; --percent:60; --strokeColor:yellow" />
</svg>
</div>
If herrstrietzel's answer doesn't solve your issue for some reason:
Once upon a time I started working on a blog post demonstrating how to generate simple SVG donut/pie charts in React. It's incomplete but it includes all the information you'd need to compute paths for drawing each segment in your chart.
The post itself is React-centric, but the methodology doesn't require React.
The snippet below was generated using the demo in that blog post.
:root {
--color1: #6761a8;
--color2: #009ddc;
--color3: #f26430;
}
svg {
max-width: 180px;
}
path:nth-child(3n + 1) {
fill: var(--color1);
}
path:nth-child(3n + 2) {
fill: var(--color2);
}
path:nth-child(3n + 3) {
fill: var(--color3);
}
<svg viewBox="0 0 100 100">
<path d="M50.99977962889557 22.51817981476399 L50.99993333466665 0.009999666671113516 A50 50 0 1 1 21.909411013411578 91.36325434956197 L34.92449717574351 72.99954813894905 A27.5 27.5 0 1 0 50.99977962889557 22.51817981476399"></path>
<path d="M33.293128455589205 71.84331575559345 L20.27779148719977 90.20684420744341 A50 50 0 0 1 19.110270928347777 10.683023540969941 L32.65908657059322 28.656553196968876 A27.5 27.5 0 0 0 33.293128455589205 71.84331575559345"></path>
<path d="M34.25580929035654 27.45292793069627 L20.707239127704607 9.479213229769087 A50 50 0 0 1 49.000066665333264 0.009999666671113516 L49.00022037110441 22.51817981476399 A27.5 27.5 0 0 0 34.25580929035654 27.45292793069627"></path>
</svg>
Computing the paths
Each <path> represents one segment (slice) of the chart.
To draw the segment you need to compute the coordinates of the 4 corners and connect them with lines and arcs.
Computing the coordinates
Given an angle, a radius, and a center point, you can compute an (x, y) coordinate via this formula:
function getCoordinate(angleInDegrees, radius, center = 50) {
// degrees to radians;
const radians = angleInDegrees * (Math.PI / 180);
const x = center - Math.cos(radians) * radius
const y = center - Math.sin(radians) * radius;
return [x, y];
}
So for a 90° segment with an outer radius of 50 and an inner radius of 20, you can get the corner coordinates via:
const radiusOuter = 50;
const radiusInner = 20;
const angleStart = 0;
const angleEnd = 90;
const [x1, y1] = getCoordinate(angleStart, radiusInner); // starting angle on inner radius
const [x2, y2] = getCoordinate(angleStart, radiusOuter); // starting angle on outer radius
const [x3, y3] = getCoordinate(angleEnd, radiusOuter); // ending angle on outer radius
const [x4, y4] = getCoordinate(angleEnd, radiusInner); // ending angle on inner radius
Connect the coordinates using SVG path commands:
Details about each of the path commands used below can be found at MDN.
const largeArc = 0; // percent > 0.5 ? 1 : 0;
const sweepOuter = 1;
const sweepInner = 0;
const commands = [
// move to start angle coordinate, inner radius (1)
`M${x1} ${y1}`,
// line to start angle coordinate, outer radius (2)
`L${x2} ${y2}`,
// arc to end angle coordinate, outer radius (3)
`A${radiusOuter} ${radiusOuter} 0 ${largeArc} ${sweepOuter} ${x3} ${y3}`,
// line to end angle coordinate, inner radius (4)
`L${x4} ${y4}`,
// arc back to start angle coordinate, inner radius (1)
`A${radiusInner} ${radiusInner} 0 ${largeArc} ${sweepInner} ${x1} ${y1}`
];
Throw it in an SVG and add a little css and you've got your segment:
svg {
width: 250px;
border: 1px solid grey;
}
path {
fill: tomato;
}
<svg viewBox="0 0 100 100">
<path d="
M30 50
L0 50
A50 50 0 0 1 50 0
L50 30
A20 20 0 0 0 30 50
"/>
</svg>
Repeat for the other segments.
How to change font-size to a SVG?
I'm using a svg icon on my website. here's the code I got from Adobe Illustrator: <svg id="Livello_1" data-name="Livello 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448.05 436.7"><path d="M190.5,66.9l22.2-22.2a23.9,23.9,0,0,1,33.9,0L441,239a23.9,23.9,0,0,1,0,33.9L246.6,467.3a23.9,23.9,0,0,1-33.9,0l-22.2-22.2a24,24,0,0,1,.4-34.3L311.4,296H24A23.94,23.94,0,0,1,0,272V240a23.94,23.94,0,0,1,24-24H311.4L190.9,101.2A23.85,23.85,0,0,1,190.5,66.9Z" transform="translate(0 -37.65)"/></svg> I've been able to change its color (in my css fill:#33453a;) but not its size (I tried with both font-size and width, but none of them worked). The reason why I'm trying to do so is that I need an icon which color and size can be changed in :hover status.
This might be a tricky question. What you are intending to do is not possible as other people pointed out, but not being possible with font-size doesn't mean it is not possible to get it working as you are expecting.
If you look into a big project like react-icons you can get a glimpse of how they do it.
const computedSize = size || conf.size || "1em";
let className;
if (conf.className) className = conf.className;
if (props.className) className = (className ? className + ' ' : '') + props.className;
return (
<svg
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
{...conf.attr}
{...attr}
{...svgProps}
className={className}
style={{ color: props.color || conf.color, ...conf.style, ...props.style}}
height={computedSize}
width={computedSize}
xmlns="http://www.w3.org/2000/svg"
>
{title && <title>{title}</title>}
{props.children}
</svg>
)
};
So you might have something similar like: <span style="font-size: 14px">hi <svg ...></svg></span>.
The trick is to assign with and height the em unit, which stands for ephemeral unit don't be confused with rem, you can read more about his in this post
What the em unit will do in your browser is to look at the closest definition of font-size and attach that one to the SVG context, that is how you get the same dimension.
Solution: add width:1em and height:1em
<svg height="1em" width="1em" id="Livello_1" data-name="Livello 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448.05 436.7"><path d="M190.5,66.9l22.2-22.2a23.9,23.9,0,0,1,33.9,0L441,239a23.9,23.9,0,0,1,0,33.9L246.6,467.3a23.9,23.9,0,0,1-33.9,0l-22.2-22.2a24,24,0,0,1,.4-34.3L311.4,296H24A23.94,23.94,0,0,1,0,272V240a23.94,23.94,0,0,1,24-24H311.4L190.9,101.2A23.85,23.85,0,0,1,190.5,66.9Z" transform="translate(0 -37.65)"/></svg>
You can not change the font size or font width because SVG is not a font. It is Scalable Vector Graphics. If you would have some text in your SVG then you could do something with the font from the text element.
In your case you have to add attribute width and height for SVG. And in hover of SVG you can change it like follows:
#Livello_1:hover
{
fill:#33453a;
width:48px;
height:48px
}
<svg id="Livello_1" width="36" height="36" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448.05 436.7"><path d="M190.5,66.9l22.2-22.2a23.9,23.9,0,0,1,33.9,0L441,239a23.9,23.9,0,0,1,0,33.9L246.6,467.3a23.9,23.9,0,0,1-33.9,0l-22.2-22.2a24,24,0,0,1,.4-34.3L311.4,296H24A23.94,23.94,0,0,1,0,272V240a23.94,23.94,0,0,1,24-24H311.4L190.9,101.2A23.85,23.85,0,0,1,190.5,66.9Z" transform="translate(0 -37.65)"/></svg>
To see the effect you have to move your mouse cursor over this SVG (in snippet, wich must be runned).
Since it does not contain a text with font, the better way is to use scale to increase the size. :
<style>
svg
{
transform: scale(1.3);
}
</style>
I guess you need to align and scale your svg icon relative to your font size.
It is kind of a 'team play' between svg and css:
In css we make sure our svg has a inline-block context, a height relative to the inherited font-sizes.
In svg we use seperate viewBox attributes for each icon.
If you need to adjust the baseline alignment or dimensions on :hover you need to avoid layout shifts e.g vertical-align would also some kind of leading to the next line – therefore we use a relative position and bottom offset.
/* just an example code to illustrate the scalability */
const fontSize= document.querySelector('.fontSize');
const layout = document.querySelector('.layout');
fontSize.addEventListener('change', function(e) {
let currentSize = +e.target.value;
layout.setAttribute('style', 'font-size:'+(1+currentSize)+'em');
});
/* svg will behave similarly to a character/glyph */
.svg-inline {
display: inline-block;
/* without a custom viewbox we have a square aspect ratio as default */
height: 1em;
width: 1em;
}
/**
* optional adjustment:
* font-size: if icons are too big
* vertical baseline offset
**/
.svg-adjust {
font-size: 0.75em;
position: relative;
bottom: -0.1em;
transition: 0.3s;
}
/* set size by viewbox if present */
.svg-inline[viewBox] {
width: auto;
}
.svg-inline-assets{
display:none
}
a:hover .svg-inline {
fill: green;
transform: scale(1.5);
margin-left: 0.5em;
margin-right: 0.5em;
}
/* example layout */
html {
font-family: "Segoe UI";
font-size: calc(1vw + 1vh /2);
line-height: 1.4em;
}
.layout {
width: 50%;
margin: 0 auto;
font-size: 1.5em;
line-height: 1.4em;
}
p {
margin: 0;
}
a {
text-decoration: none;
color: inherit;
border-bottom: 2px solid #aaa;
}
a .svg-inline {
fill: #aaa;
}
.button {
font-size: 1.333em;
line-height: 1em;
background-color: #aaa;
border: 2px solid #aaa;
color: #fff;
cursor: pointer;
margin-top: 1rem;
padding: 0.3em;
}
.button .svg-inline {
fill: #fff;
}
.input-range {
width: 100%;
}
<main class="layout">
<h3>Change font Size</h3>
<p>
<input class="input-range fontSize" type="range" value="0" min="-0.5" max="0.5" step="0.1">
</p>
<svg class="svg-inline-assets" viewBox="0 0 100 100">
<!-- every asset has it's own viewbox: this way we can place icons with different widths -->
<symbol id="fa-arrow-right-asset" viewBox="0 0 100 100">
<path d="M42.5,7.8l5-5c2.1-2.1,5.5-2.1,7.5,0c0,0,0,0,0,0l43.4,43.4c2.1,2.1,2.1,5.5,0,7.5c0,0,0,0,0,0L55,97.2c-2.1,2.1-5.5,2.1-7.5,0c0,0,0,0,0,0l-5-5c-2.1-2.1-2.1-5.5,0-7.6c0,0,0.1-0.1,0.1-0.1l26.9-25.6H5.4c-3,0-5.3-2.4-5.4-5.3c0,0,0,0,0,0v-7.1c0-3,2.4-5.3,5.3-5.4c0,0,0,0,0,0h64.1L42.6,15.5c-2.1-2-2.2-5.4-0.2-7.5C42.4,7.9,42.5,7.8,42.5,7.8z" />
</symbol>
<symbol id="fa-arrow-right-long-asset" viewBox="0 0 200 100">
<path d="M141.1,7.8l5-5c2.1-2.1,5.5-2.1,7.5,0c0,0,0,0,0,0L197,46.2c2.1,2.1,2.1,5.5,0,7.5c0,0,0,0,0,0l-43.4,43.4c-2.1,2.1-5.5,2.1-7.5,0c0,0,0,0,0,0l-5-5c-2.1-2.1-2.1-5.5,0-7.6c0,0,0.1-0.1,0.1-0.1l26.9-25.6H5.4c-3,0-5.3-2.4-5.4-5.3c0,0,0,0,0,0v-7.1c0-3,2.4-5.3,5.3-5.4c0,0,0,0,0,0h162.7l-26.9-25.6c-2.1-2-2.2-5.4-0.2-7.5C141,7.9,141,7.8,141.1,7.8z" />
</symbol>
<!-- this arrow has a x offset of 200: without it's own viewbox it would be cropped -->
<symbol id="fa-arrow-right-long-offset-asset" viewBox="200 0 200 100">
<path d="M341.1,7.8l5,-5c2.1,-2.1,5.5,-2.1,7.5,0c0,0,0,0,0,0l43.4,43.4c2.1,2.1,2.1,5.5,0,7.5c0,0,0,0,0,0l-43.4,43.4c-2.1,2.1,-5.5,2.1,-7.5,0c0,0,0,0,0,0l-5,-5c-2.1,-2.1,-2.1,-5.5,0,-7.6c0,0,0.1,-0.1,0.1,-0.1l26.9,-25.6h-162.7c-3,0,-5.3,-2.4,-5.4,-5.3c0,0,0,0,0,0v-7.1c0,-3,2.4,-5.3,5.3,-5.4c0,0,0,0,0,0h162.7l-26.9,-25.6c-2.1,-2,-2.2,-5.4,-0.2,-7.5c0.1,0,0.1,-0.1,0.2,-0.1z" />
</symbol>
<symbol id="fa-arrow-right-narrow-asset" viewBox="0 0 60 100">
<path d="M57.5,46.2L14.1,2.8c0,0,0,0,0,0c-2.1-2.1-5.5-2.1-7.5,0l-5,5c0,0-0.1,0.1-0.1,0.1c-2,2.1-1.9,5.5,0.2,7.5l37,34.5l-37,34.5c0,0-0.1,0.1-0.1,0.1c-2.1,2.1-2.1,5.5,0,7.6l5,5c0,0,0,0,0,0c2.1,2.1,5.5,2.1,7.5,0l43.4-43.4c0,0,0,0,0,0C59.6,51.7,59.6,48.3,57.5,46.2z" />
</symbol>
</svg>
<h2>Svg inlined icon</h2>
<p><svg class="svg-inline">
<use href="#fa-arrow-right-asset" />
</svg>No vertical adjustment. One morning, when
<svg class="svg-inline svg-adjust">
<use href="#fa-arrow-right-asset" />
</svg>
Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a
<a href="#"><svg class="svg-inline svg-adjust" viewBox="0 0 200 100">
<use href="#fa-arrow-right-long-asset" />
</svg>
little he could see his brown belly</a>, slightly domed and divided by arches into stiff sections.
<svg class="svg-inline svg-adjust" viewBox="0 0 200 100">
<use href="#fa-arrow-right-long-offset-asset" />
</svg> Long arrow with offset.
</p>
<p>The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with
<svg class="svg-inline svg-adjust" viewBox="0 0 60 100">
<use href="#fa-arrow-right-narrow-asset" />
</svg> the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream.
</p>
<p>
<button class="button" type="button">
<svg class="svg-inline svg-adjust" viewBox="0 0 60 100">
<use href="#fa-arrow-right-narrow-asset" />
</svg> Button
</button>
<button class="button" type="button">
<svg class="svg-inline svg-adjust">
<use href="#fa-arrow-right-asset" />
</svg>
</button>
<button class="button" type="button">
<svg class="svg-inline svg-adjust" viewBox="0 0 200 100">
<use href="#fa-arrow-right-long-asset" />
</svg>
</button>
</p>
</main>
You can try setting width and height for svg tag. Working link is here
add to svg transform="scale(1.7)" for zoon in <svg transform="scale(1.7)" width="16px" height="24px" version="1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg" >
I want to implement SVG clip-path for SVG element
I want to implement SVG clip-path for SVG element. I have a DIV element in which I want to put SVG element which will act as a clipping mask, and also I have the separate SVG element that has an image to which the clipping mask will be applied.
The first problem I faced with is that clipping mask moves to the left top corner of the viewport but not located inside of the parent DIV element.
The second problem is that I want to make an image on the full screen not depending on the screen size.
Incorrect Mask Circle
Correct Mask Circle (what I want to have)
Do you have suggestions how to make it?
Thanks in advance!
html, body { margin:0; padding:0; overflow:hidden }
svg { position:absolute; top:0; left:0;}
.image-clip-src {
width: 100%;
height: 100%;
}
.svg-wrapper {
width: 72px;
height: 72px;
padding: 2.5em;
border: 1px solid #4D4F51;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
position: fixed;
top: 55%;
z-index: 9;
left: 64%;
transform: translateY(-50%);
cursor: pointer;
}
.clipped-image image {
clip-path: url(#clipping);
}
<svg class="clipped-image" width="100%" height="100%" viewBox="0 0 1440 960" preserveAspectRatio="xMinYMin meet">
<image class="image-clip-src" xlink:href="https://images.unsplash.com/photo-1526327227970-4bda49fa3489?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3c4bce33d96df6b18af53fb2dae3363e&auto=format&fit=crop&w=1650&q=80" width="100%" height="100%" overflow="visible"/>
</svg>
<div class="svg-wrapper">
<svg class="svg-defs">
<defs>
<clipPath id="clipping">
<circle r="72" stroke="black" stroke-width="3"/>
</clipPath>
</defs>
</svg>
</div>
That's not the way SVG works.
When you tell something to use a clip path, all it sees is the clip path definition itself. It doesn't know or care about where on the page you have positioned it's parent <svg>.
If you want the clip circle to be at a certain position on the water image, you need to specify its position using cx and cy.
html, body { margin:0; padding:0; overflow:hidden }
svg { position:absolute; top:0; left:0;}
.image-clip-src {
width: 100%;
height: 100%;
}
.clipped-image image {
clip-path: url(#clipping);
}
<svg class="clipped-image" width="100%" height="100%" viewBox="0 0 1440 960" preserveAspectRatio="xMinYMin meet">
<defs>
<clipPath id="clipping">
<circle cx="64%" cy="55%" r="72" stroke="black" stroke-width="3"/>
</clipPath>
</defs>
<image class="image-clip-src" xlink:href="https://images.unsplash.com/photo-1526327227970-4bda49fa3489?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3c4bce33d96df6b18af53fb2dae3363e&auto=format&fit=crop&w=1650&q=80" width="100%" height="100%" overflow="visible"/>
<circle cx="64%" cy="55%" r="72" fill="none" stroke="#4D4F51" stroke-width="1"/>
</svg>
Shaped svg background
I have to code design like on the picture below: and it's responsive version looks like that: Im Have no idea how to code background with this shape and also with shaped line before background. Should I just create two very big svg's for bg and line or do it other way ? I would be grateful for any help
How I would approach this is by stacking three SVGs on top of one another. Using position: absolute SVGs inside a position: relative container element.
The three layers are:
A background graph shape with a grey fill
A mid-ground SVG with the three boxes
A foreground graph shape that has a blue stroke, but no fill, so you can see layers #1 and #2 behind it.
We can make the two graph shapes preserveAspectRatio="none" so that they stretch to the width of the screen, We can also make it so that they share the same path definition to save space.
The middle layer we make preserveAspectRatio="xMaxYMid meet" so it hugs the right hand side of the screen. That's just one way, of several we could have used, to achieve that effect.
body {
margin: 0;
padding: 0;
background-color: #111166;
}
#svg-container {
position: relative;
}
#svg-container > svg {
position: absolute;
top: 0;
width: 100%;
height: 400px;
}
#background-graph {
fill: #f8f8f8;
overflow: visible;
}
#foreground-graph {
fill: none;
stroke: #111166;
stroke-width: 2;
}
<svg width="0" height="0" display="none">
<!-- The graph shape. Used in two places below. -->
<polygon id="jagged" points="0,360, 65,325, 100,340, 120,330, 130,335, 225,270, 255,295, 280,275, 290,290, 340,250, 360, 255, 400,235, 400,2000, 0,2000" style="vector-effect: non-scaling-stroke"/>
</svg>
<div id="svg-container">
<svg id="background-graph" viewBox="0 0 400 400" preserveAspectRatio="none">
<use xlink:href="#jagged"/>
</svg>
<svg id="boxes" viewBox="0 0 400 400" preserveAspectRatio="xMaxYMid meet">
<rect id="box1" x="30" y="10" width="225" height="175" fill="#fafafa"/>
<rect id="box2" x="75" y="155" width="265" height="190" fill="#fff"/>
<rect id="box3" x="260" y="80" width="125" height="70" fill="#fafafa"/>
</svg>
<svg id="foreground-graph" viewBox="0 0 400 400" preserveAspectRatio="none">
<use xlink:href="#jagged"/>
</svg>
</div>