rotate svg fill path box

rotate svg fill path box - html

I design box border using svg like this :
HTML:
<svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0 L100 100 L0 100" stroke-width="0"></path>
</svg>
CSS:
.decor {
fill: #F00;
stroke: #e74c3c;
}
result:
Now i need to rotation to this:
How do generate this?!
DEMO FIDDLE

Add transform="rotate(180, 50, 50)" to the path
.decor {
fill: #F00;
stroke: #e74c3c;
}
<svg class="decor" height="100%" viewBox="0 0 100 100" width="100%" preserveAspectRatio="none" >
<path transform="rotate(180, 50, 50)" d="M0 0 L100 100 L0 100"></path>
</svg>

Just do this:
.decor {
fill: #F00;
stroke: #e74c3c;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
This will rotate it to be the way you want.
Fiddle: http://jsfiddle.net/jkvp1x8m/

Related

How to put an image in SVG rounded corner hexagon using HTML and CSS?

I am trying to achieve something like the below using SVG:
I have tried many solutions from this platform and so far, I have accomplished this:
<svg xmlns="http://www.w3.org/2000/svg" width="327.846" height="318.144" viewBox="0 0 327.846 318.144">
<defs>
<style>
.a {
fill:#000;
stroke-width: 25px;
stroke: rgba(255, 255, 255, 0.5);
}
</style>
</defs>
<path class="a" d="M172.871,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,76.831,0Z" transform="translate(111.598) rotate(30)"/>
</svg>
With the above code, I am able to add stroke but not image. And for below code, I am able to add the image but stroke is not appearing:
<svg xmlns="http://www.w3.org/2000/svg" width="327.846" height="318.144" viewBox="0 0 327.846 318.144">
<defs>
<style>
.a {
fill: #000;
stroke-width: 25px;
stroke: rgba(255, 255, 255, 0.5);
}
</style>
<clipPath id="image">
<path class="a"
d="M172.871,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,76.831,0Z"
transform="translate(111.598) rotate(30)" />
</clipPath>
</defs>
<image clip-path="url(#image)" height="100%" width="100%" xlink:href="http://placekitten.com/800/800"
preserveAspectRatio="xMidYMin slice"></image>
</svg>
What am I missing to get both onboard?
PS: Rounded corners are a must for the outer core and transparent layer.
Any help/suggestions will be very helpful. Thanks.

Set fill: transparent / fill: none for the path and use it again, as a child of svg
<svg xmlns="http://www.w3.org/2000/svg" width="327.846" height="318.144" viewBox="0 0 327.846 318.144">
<defs>
<style>
.a {
fill: none;
stroke-width: 25px;
stroke: rgba(255, 255, 255, 0.5);
}
</style>
<clipPath id="image">
<path transform="translate(111.598) rotate(30)" d="M172.871,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,76.831,0Z"/>
</clipPath>
</defs>
<image clip-path="url(#image)" height="100%" width="100%" xlink:href="http://placekitten.com/800/800" preserveAspectRatio="xMidYMin slice"></image>
<path class="a" d="M172.871,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,76.831,0Z" transform="translate(111.598) rotate(30)"/>
</svg>

comments on #Vishal Bhatt
One more queue: when I increase stroke-width, the curve on the
transparent layer becomes a sharp corner. How can I keep that rounded
when increasing stroke-width?
will help solve the problem - stroke-linejoin:round;
Used a wide stroke of 65px while keeping the inner rounding of the stroke
For solution instead of clip-Path one can try mask:
<svg xmlns="http://www.w3.org/2000/svg" width="327.846" height="318.144" viewBox="0 0 327.846 318.144">
<defs>
<style>
.a {
fill:white;
stroke-width: 65px;
stroke: rgba(255, 255, 255, 0.5);
stroke-linejoin:round;
}
</style>
<mask id="msk">
<path class="a" transform="translate(111.598) rotate(30)" d="M172.871,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,76.831,0Z"/>
</mask>
</defs>
<image mask="url(#msk)" height="100%" width="100%" xlink:href="http://placekitten.com/800/800" preserveAspectRatio="xMidYMin slice"></image>
</svg>
Update
Hexagon rotation command
transform="rotate(15 124.5 111.5)", here
15 - angle of rotation
124.5 111.5 - Hexagon rotation center coordinates
<svg xmlns="http://www.w3.org/2000/svg" width="327.846" height="318.144" viewBox="0 0 327.846 318.144">
<defs>
<style>
.a {
fill:white;
stroke-width: 45px;
stroke: rgba(255, 255, 255, 0.5);
stroke-linejoin:round;
}
</style>
<mask id="msk">
<path class="a" transform="translate(50 50) rotate(15 124.5 111.5)" d="M172.871,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,76.831,0Z"/>
</mask>
</defs>
<image mask="url(#msk)" height="100%" width="100%" xlink:href="http://placekitten.com/800/800" preserveAspectRatio="xMidYMin slice"></image>
</svg>

Problem with clip-path or masks, is they need to have unique ids if you have multiple SVGs on the page.
One way around this is to create the SVG client-side; and generate a unique id for every clip-path
While we're at it might as well simplify that Hexagon path
Wrapped in a Custom Element (no shadowDOM required with that unique id) you get:
<style>
svg {
width: 148px;
background: teal;
}
</style>
<svg-hexed-image ></svg-hexed-image>
<svg-hexed-image src="http://placekitten.com/800/800"></svg-hexed-image>
<svg-hexed-image rotate="30" src="http://placekitten.com/801/801"></svg-hexed-image>
<svg-hexed-image rotate="45" stroke="red" opacity=".5" src="http://placekitten.com/300/300"></svg-hexed-image>
<script>
customElements.define('svg-hexed-image', class extends HTMLElement {
connectedCallback() {
let img = this.getAttribute("src") || "http://placekitten.com/120/120";
let strokewidth = this.getAttribute("stroke-width") || "3";
let opacity = this.getAttribute("opacity") || ".5";
let stroke = this.getAttribute("stroke") || "white";
let rotate = this.getAttribute("rotate") || 0;
let transform = `transform="rotate(${rotate} 23 23)"`;
// make very sure for a unique id:
let id = "id" + btoa(img) + (new Date() / 1);
let d = `M31 3.5a5 5 90 014 3l8 14a5 5 90 010 5l-8 14a5 5 90 01-4 3h-16a5 5 90 01-4-3l-8-14a5 5 90 010-5l8-14a5 5 90 014-3z`;
// now write HTML:
this.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46 46">
<defs><clipPath id="${id}"><path fill="none" ${transform} d="${d}"></clipPath></defs>
<image clip-path="url(#${id})" height="100%" width="100%" href="${img}"></image>
<path fill="none" stroke="${stroke}" stroke-width="${strokewidth}"
${transform} opacity="${opacity}" d="${d}"/></svg>`;
}
});
</script>

animating an SVG <path> element in a <g> tag

I'm attempting to use :hover in CSS to get a slice of a circle to rotate.
The CSS I'm attempting to use will cause the slice to rotate as I would expect. However, when I add the :hover selector, it doesn't rotate.
My HTML and CSS is below:
transform-origin: 190px 50px;
transform: rotate(360deg);
transition: transform 10s;
}
#box:hover {
fill-opacity: 0%;
stroke: black;
}
#circle:hover {
transform-origin: 10% 10%;
transform: rotate(90deg);
transition: transform 2s;
stroke: black;
}
<div id="divThree">
<svg id="box" version="1.1" width="500" height="300" viewBox="0 0 500 300" xmlns="htp://www.w3.org/2000/svg">
<g class="slice">
<path d="M 50 50 H 190 V 190 C 190 190, 58.99 189.99, 50 50"></path>
</g>
<circle id="circle" cx="190" cy="50" r="140" fill-opacity="0.0" stroke="red "fill="black"/>
</svg>
</div>
My codepen is here.

Your CSS code is fine. You can do #box .slice:hover.
But you should look at your SVG: there is <g class="slice"> before <circle .... So circle overlaps your slice, in this case slice will never be hovered.
Simplest solution will be to just move circle before slice:
<svg id="box" version="1.1" width="500" height="300" viewBox="0 0 500 300" xmlns="htp://www.w3.org/2000/svg">
<circle id="circle" cx="190" cy="50" r="140" fill-opacity="0.0" stroke="red "fill="black"/>
<g class="slice">
<path d="M 50 50 H 190 V 190 C 190 190, 58.99 189.99, 50 50"></path>
</g>
</svg>
or you can disable pointer events for circle:
#box circle {
pointer-events: none;
}
Working solution: https://codepen.io/emtei/pen/PoqObRp?editors=1100

SVG Fill Animation doesn't work on Firefox and Edge

I have a simple animation where an SVG fills on mouse over. It is working fine on Chrome, but I've found that it's doesn't workg on Firefox or Edge. I've tried few different approaches, but nothing seems to help. I'm new to SVG and I guess I'm missing something? What is the proper way to achieve what I'm trying to do? Here is the code:
svg#bogeLogo {
display: block;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
svg#bogeLogo #bogePath {
fill: transparent;
stroke: red;
stroke-width: 8;
}
svg#bogeLogo #bogeFinal {
fill: blue;
}
svg#bogeLogo #bogeClip rect {
transition: all 1.4s ease-out !important;
width: 0;
}
svg#bogeLogo:hover #bogeClip rect {
width: 100%;
}
<svg id="bogeLogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 2551.2 2551.2" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<defs>
<path id="bogePath" d="M1263.5,1239.5l0-1l0.8-1194.9l-60.3,0l-0.6,1195.9l-1146.6,0.2v60.3l1146.6-0.5v1195h59l1-1195 l1231.9,0.5l0-60.3L1263.5,1239.5z M779.6,1037c98.3-37.9,134.5-130.5,138.1-140c6.8-18.3,31.3-87,1.9-161.1 c-20.6-52-58.4-82.8-74.8-95.9c-23.2-18.5-45.4-27.8-61.3-34.5c13.2-6.5,52.6-26.9,76.7-90.2c26-68.5-0.8-128.3-7.7-143.8 c-25.5-57.3-74.1-84.5-95-96.9c-31.8-19-83.7-25.5-104.2-26.3L410.2,248v3.2l-1.1,800.3v1.1l293.7-0.2 C721.3,1051.7,748.9,1048.8,779.6,1037z M570.6,394.5c46.8-9.2,80.5-1.6,97.8,3.8c19.2,6.1,27.6,12.5,32.6,17.3 c22.3,21.1,22.8,51.6,23,61.4c0.2,9.5,0.7,37.9-19.2,61.4c-18.5,21.9-43.5,28.8-65.2,30.7c-31.6,2.7-51.9,2.2-69-1.9V394.5z M570.6,908.5V701.4c33.3-3.2,60.9-2.9,80.5-1.9c39.3,2,59.3,3.2,80.5,15.3c7,4,29.8,17.4,44.1,46c5.2,10.5,15.6,35.6,9.6,67.1 c-2.2,11.7-9.7,39.6-34.5,59.5c-11,8.7-25.4,16-63.3,21.1C660.3,912.2,620.2,914.9,570.6,908.5z M1835.5,1052.5 c218.7,0,395-184.3,395-403s-177.3-407-396-407s-396,188.3-396,407S1616.8,1052.5,1835.5,1052.5z M1835,390.5 c131.3,0,237.8,116.2,237.8,259.5S1966.3,909.5,1835,909.5S1597.2,793.3,1597.2,650S1703.7,390.5,1835,390.5z M636.5,1879.5v1l1,129 v0.1c73,0.1,142.9,0.3,216,0.4c-5.4,14.1-15,34.1-31.6,54.7c-5.9,7.2-35.7,43.1-89.4,63.7c-58.3,22.4-109.4,13.3-136.9,8.1 c-54.1-10.3-90.3-33.6-98.9-39.3c-39-25.9-60.5-55.8-71.8-71.8c-14.1-20-35.1-50.4-44.7-96.2c-2.4-11.6-10.4-54.2,2.7-107.1 c3.5-14.3,14.4-52.5,44.7-92.2c9.3-12.2,39.6-49.6,93.5-75.9c15.2-7.4,47.4-21.4,90.8-25.7c7.7-0.8,40-3.7,81.3,4.1 c19.2,3.6,46.7,9,77.2,25.7c14.7,8,31,19.8,63.7,43.4c8.8,6.3,15.7,12.5,20.5,16l90-106c-15.9-18.7-35.7-40.2-71-63 c-54-35-103.7-45.6-141.8-53.3c-31.3-6.3-86.6-17-158.1-6.3c-59.3,8.9-105.3,28.7-134.6,44.3c-49.5,26.2-82,56.1-95.8,69.6 c-39.5,38.6-60.6,75.2-65,83.1c-4.7,8.2-27.1,48.6-39.8,107.5c-2.3,10.9-9.1,44.7-9,89.4c0,22.3,0.4,59.9,13.6,106.6 c10.1,35.8,23.2,61,32.5,78.6c11,20.9,29,54.4,62.3,90.3c39,42.1,79.9,66.8,106.6,80.4c46.4,23.6,85.8,31.6,109.3,36.1 c25.3,4.9,72.3,11.8,131,6.3c27.9-2.6,61.2-6,102.1-21.7c14.8-5.7,58.3-23.6,103-63.2c42.8-37.9,65.1-76.5,79.5-102.1 c12.4-21.9,31.2-55.8,42.5-104.8c10.8-46.8,9.9-87,7.3-113.9L636.5,1879.5z M1019,1874.6c0,0.3,0.1,0.6,0.1,0.9l1.4,0L1019,1874.6z M1753.3,1919.6l291.8,1.1v-1.1l-1.1-142.2l-285.5,1.1h-1.1l1-137.9h1l304.6-3.3h1.1v-151.7h-464.6v2.1l-0.5,794l0,0.4h470.4v-146.4 h-317.1V1919.6z"/>
<clipPath id="bogeClip">
<rect x="0" y="0" height="100%" width="100%"/>
</clipPath>
</defs>
<use xlink:href="#bogePath"/>
<path id="bogeFinal" clip-path="url(#bogeClip)" d="M1263.5,1239.5l0-1l0.8-1194.9l-60.3,0l-0.6,1195.9l-1146.6,0.2v60.3l1146.6-0.5v1195h59l1-1195 l1231.9,0.5l0-60.3L1263.5,1239.5z M779.6,1037c98.3-37.9,134.5-130.5,138.1-140c6.8-18.3,31.3-87,1.9-161.1 c-20.6-52-58.4-82.8-74.8-95.9c-23.2-18.5-45.4-27.8-61.3-34.5c13.2-6.5,52.6-26.9,76.7-90.2c26-68.5-0.8-128.3-7.7-143.8 c-25.5-57.3-74.1-84.5-95-96.9c-31.8-19-83.7-25.5-104.2-26.3L410.2,248v3.2l-1.1,800.3v1.1l293.7-0.2 C721.3,1051.7,748.9,1048.8,779.6,1037z M570.6,394.5c46.8-9.2,80.5-1.6,97.8,3.8c19.2,6.1,27.6,12.5,32.6,17.3 c22.3,21.1,22.8,51.6,23,61.4c0.2,9.5,0.7,37.9-19.2,61.4c-18.5,21.9-43.5,28.8-65.2,30.7c-31.6,2.7-51.9,2.2-69-1.9V394.5z M570.6,908.5V701.4c33.3-3.2,60.9-2.9,80.5-1.9c39.3,2,59.3,3.2,80.5,15.3c7,4,29.8,17.4,44.1,46c5.2,10.5,15.6,35.6,9.6,67.1 c-2.2,11.7-9.7,39.6-34.5,59.5c-11,8.7-25.4,16-63.3,21.1C660.3,912.2,620.2,914.9,570.6,908.5z M1835.5,1052.5 c218.7,0,395-184.3,395-403s-177.3-407-396-407s-396,188.3-396,407S1616.8,1052.5,1835.5,1052.5z M1835,390.5 c131.3,0,237.8,116.2,237.8,259.5S1966.3,909.5,1835,909.5S1597.2,793.3,1597.2,650S1703.7,390.5,1835,390.5z M636.5,1879.5v1l1,129 v0.1c73,0.1,142.9,0.3,216,0.4c-5.4,14.1-15,34.1-31.6,54.7c-5.9,7.2-35.7,43.1-89.4,63.7c-58.3,22.4-109.4,13.3-136.9,8.1 c-54.1-10.3-90.3-33.6-98.9-39.3c-39-25.9-60.5-55.8-71.8-71.8c-14.1-20-35.1-50.4-44.7-96.2c-2.4-11.6-10.4-54.2,2.7-107.1 c3.5-14.3,14.4-52.5,44.7-92.2c9.3-12.2,39.6-49.6,93.5-75.9c15.2-7.4,47.4-21.4,90.8-25.7c7.7-0.8,40-3.7,81.3,4.1 c19.2,3.6,46.7,9,77.2,25.7c14.7,8,31,19.8,63.7,43.4c8.8,6.3,15.7,12.5,20.5,16l90-106c-15.9-18.7-35.7-40.2-71-63 c-54-35-103.7-45.6-141.8-53.3c-31.3-6.3-86.6-17-158.1-6.3c-59.3,8.9-105.3,28.7-134.6,44.3c-49.5,26.2-82,56.1-95.8,69.6 c-39.5,38.6-60.6,75.2-65,83.1c-4.7,8.2-27.1,48.6-39.8,107.5c-2.3,10.9-9.1,44.7-9,89.4c0,22.3,0.4,59.9,13.6,106.6 c10.1,35.8,23.2,61,32.5,78.6c11,20.9,29,54.4,62.3,90.3c39,42.1,79.9,66.8,106.6,80.4c46.4,23.6,85.8,31.6,109.3,36.1 c25.3,4.9,72.3,11.8,131,6.3c27.9-2.6,61.2-6,102.1-21.7c14.8-5.7,58.3-23.6,103-63.2c42.8-37.9,65.1-76.5,79.5-102.1 c12.4-21.9,31.2-55.8,42.5-104.8c10.8-46.8,9.9-87,7.3-113.9L636.5,1879.5z M1019,1874.6c0,0.3,0.1,0.6,0.1,0.9l1.4,0L1019,1874.6z M1753.3,1919.6l291.8,1.1v-1.1l-1.1-142.2l-285.5,1.1h-1.1l1-137.9h1l304.6-3.3h1.1v-151.7h-464.6v2.1l-0.5,794l0,0.4h470.4v-146.4 h-317.1V1919.6z"></path>
</svg>

Modifying geometric attributes, such as width, is a new thing in SVG 2. Only Chrome has implemented that so far.
You will need to use a different method to animate your <rect>. For example, you could move it horizontally using a transform, instead of changing its width.
Update
It looks like there is a bug in Firefox at the moment, causing CSS selectors to not match elements in the <defs> section.
The solution is to use the logo as the clippath, and move a blue rectangle in and out instead.
svg#bogeLogo {
display: block;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
#bogePath {
fill: transparent;
stroke: red;
stroke-width: 8;
}
svg#bogeLogo #bogeFinal {
fill: blue;
transition: all 1.4s ease-out !important;
transform: translateX(-2552px);
}
svg#bogeLogo:hover #bogeFinal {
transform: translateX(0px);
}
<svg id="bogeLogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 2551.2 2551.2" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<defs>
<path id="bogePath" d="M1263.5,1239.5l0-1l0.8-1194.9l-60.3,0l-0.6,1195.9l-1146.6,0.2v60.3l1146.6-0.5v1195h59l1-1195 l1231.9,0.5l0-60.3L1263.5,1239.5z M779.6,1037c98.3-37.9,134.5-130.5,138.1-140c6.8-18.3,31.3-87,1.9-161.1 c-20.6-52-58.4-82.8-74.8-95.9c-23.2-18.5-45.4-27.8-61.3-34.5c13.2-6.5,52.6-26.9,76.7-90.2c26-68.5-0.8-128.3-7.7-143.8 c-25.5-57.3-74.1-84.5-95-96.9c-31.8-19-83.7-25.5-104.2-26.3L410.2,248v3.2l-1.1,800.3v1.1l293.7-0.2 C721.3,1051.7,748.9,1048.8,779.6,1037z M570.6,394.5c46.8-9.2,80.5-1.6,97.8,3.8c19.2,6.1,27.6,12.5,32.6,17.3 c22.3,21.1,22.8,51.6,23,61.4c0.2,9.5,0.7,37.9-19.2,61.4c-18.5,21.9-43.5,28.8-65.2,30.7c-31.6,2.7-51.9,2.2-69-1.9V394.5z M570.6,908.5V701.4c33.3-3.2,60.9-2.9,80.5-1.9c39.3,2,59.3,3.2,80.5,15.3c7,4,29.8,17.4,44.1,46c5.2,10.5,15.6,35.6,9.6,67.1 c-2.2,11.7-9.7,39.6-34.5,59.5c-11,8.7-25.4,16-63.3,21.1C660.3,912.2,620.2,914.9,570.6,908.5z M1835.5,1052.5 c218.7,0,395-184.3,395-403s-177.3-407-396-407s-396,188.3-396,407S1616.8,1052.5,1835.5,1052.5z M1835,390.5 c131.3,0,237.8,116.2,237.8,259.5S1966.3,909.5,1835,909.5S1597.2,793.3,1597.2,650S1703.7,390.5,1835,390.5z M636.5,1879.5v1l1,129 v0.1c73,0.1,142.9,0.3,216,0.4c-5.4,14.1-15,34.1-31.6,54.7c-5.9,7.2-35.7,43.1-89.4,63.7c-58.3,22.4-109.4,13.3-136.9,8.1 c-54.1-10.3-90.3-33.6-98.9-39.3c-39-25.9-60.5-55.8-71.8-71.8c-14.1-20-35.1-50.4-44.7-96.2c-2.4-11.6-10.4-54.2,2.7-107.1 c3.5-14.3,14.4-52.5,44.7-92.2c9.3-12.2,39.6-49.6,93.5-75.9c15.2-7.4,47.4-21.4,90.8-25.7c7.7-0.8,40-3.7,81.3,4.1 c19.2,3.6,46.7,9,77.2,25.7c14.7,8,31,19.8,63.7,43.4c8.8,6.3,15.7,12.5,20.5,16l90-106c-15.9-18.7-35.7-40.2-71-63 c-54-35-103.7-45.6-141.8-53.3c-31.3-6.3-86.6-17-158.1-6.3c-59.3,8.9-105.3,28.7-134.6,44.3c-49.5,26.2-82,56.1-95.8,69.6 c-39.5,38.6-60.6,75.2-65,83.1c-4.7,8.2-27.1,48.6-39.8,107.5c-2.3,10.9-9.1,44.7-9,89.4c0,22.3,0.4,59.9,13.6,106.6 c10.1,35.8,23.2,61,32.5,78.6c11,20.9,29,54.4,62.3,90.3c39,42.1,79.9,66.8,106.6,80.4c46.4,23.6,85.8,31.6,109.3,36.1 c25.3,4.9,72.3,11.8,131,6.3c27.9-2.6,61.2-6,102.1-21.7c14.8-5.7,58.3-23.6,103-63.2c42.8-37.9,65.1-76.5,79.5-102.1 c12.4-21.9,31.2-55.8,42.5-104.8c10.8-46.8,9.9-87,7.3-113.9L636.5,1879.5z M1019,1874.6c0,0.3,0.1,0.6,0.1,0.9l1.4,0L1019,1874.6z M1753.3,1919.6l291.8,1.1v-1.1l-1.1-142.2l-285.5,1.1h-1.1l1-137.9h1l304.6-3.3h1.1v-151.7h-464.6v2.1l-0.5,794l0,0.4h470.4v-146.4 h-317.1V1919.6z"/>
<clipPath id="bogeClip">
<use xlink:href="#bogePath"/>
</clipPath>
</defs>
<use xlink:href="#bogePath"/>
<g clip-path="url(#bogeClip)">
<rect id="bogeFinal" x="0" y="0" height="100%" width="100%"/>
</g>
</svg>

Create and Filling arc progressively with css - circle progress bar

I'm struggling to fill an arc like a progress bar because I'm not that good working with css.
I want to achieve a "progress" arc like this:
I came across with this: https://codepen.io/enslavedeagle/pen/AXzaKE
#arc,
#arc::before {
display: block;
box-sizing: border-box;
border-radius: 100%;
width: 100px;
height: 100px;
position: absolute;
background-color: transparent;
padding: 0;
margin: 0;
}
#arc {
border: solid #00BBEE 12px;
clip: rect(0px, 100px, 50px, 0px);
margin: 25px;
}
#arc::before {
content: '';
border: solid black 12px;
top: -12px;
left: -12px;
clip: rect(0px, 100px, 50px, 0px);
transform: rotate(-150deg);
/* define the fill length, using the rotation above.
from -180deg (0% fill) to 0deg (100% fill) */
/* if you have a better solution to make thing like this
work, please let me know! :) */
}
and try to customize to be like what I want to but with no sucess until now: here: https://codepen.io/anon/pen/qpNrEP
Could any one give some help with this? Can also be alternative solution to achieve this.
I appreciate
Kind regards,

You can use an SVG with two arc on on top of the other and then use stroke-dash-array.
svg {
height: 90vh;
margin: auto;
display: block;
}
path {
stroke-linecap: round;
stroke-width: 2;
}
path.grey {
stroke: lightgrey;
}
path.purple {
stroke: purple;
stroke-dasharray: calc(40 * 3.142 * 1.85);
stroke-dashoffset: 20;
/* adjust last number for variance */
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100">
<path class="grey" d="M40,90
A40,40 0 1,1 60,90"
style="fill:none;"/>
<path class="purple" d="M40,90
A40,40 0 1,1 60,90"
style="fill:none;"/>
</svg>

Using SVG is the best way to create an arc like this.
Here is the solution with all iterations of the loader:
.progress-wrapper {
height: 100vh;
display: flex;
align-items: center;
justify-content: space-around;
}
path {
stroke-linecap: round;
stroke-width: 6;
}
.grey {
stroke: #e5e5e5;
}
.red {
stroke: #e33800;
stroke-dasharray: 248;
stroke-dashoffset: 240;
/* adjust last number for variance */
}
.red-02 {
stroke-dashoffset: 220;
}
.red-03 {
stroke-dashoffset: 200;
}
.red-04 {
stroke-dashoffset: 180;
}
.red-05 {
stroke-dashoffset: 160;
}
.red-06 {
stroke-dashoffset: 140;
}
.red-07 {
stroke-dashoffset: 120;
}
.red-08 {
stroke-dashoffset: 100;
}
.red-09 {
stroke-dashoffset: 50;
}
.red-10 {
stroke-dashoffset: 0;
}
<div class="progress-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
<path class="grey" d="M55,90
A55,55 0 1,1 140,90"
style="fill:none;"/>
<path class="red" d="M55,90
A55,55 0 1,1 140,90"
style="fill:none;"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
<path class="grey" d="M55,90
A55,55 0 1,1 140,90"
style="fill:none;"/>
<path class="red red-02" d="M55,90
A55,55 0 1,1 140,90"
style="fill:none;"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
<path class="grey" d="M55,90
A55,55 0 1,1 140,90"
style="fill:none;"/>
<path class="red red-03" d="M55,90
A55,55 0 1,1 140,90"
style="fill:none;"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
<path class="grey" d="M55,90
A55,55 0 1,1 140,90"
style="fill:none;"/>
<path class="red red-04" d="M55,90
A55,55 0 1,1 140,90"
style="fill:none;"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
<path class="grey" d="M55,90
A55,55 0 1,1 140,90"
style="fill:none;"/>
<path class="red red-05" d="M55,90
A55,55 0 1,1 140,90"
style="fill:none;"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
<path class="grey" d="M55,90
A55,55 0 1,1 140,90"
style="fill:none;"/>
<path class="red red-06" d="M55,90
A55,55 0 1,1 140,90"
style="fill:none;"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
<path class="grey" d="M55,90
A55,55 0 1,1 140,90"
style="fill:none;"/>
<path class="red red-07" d="M55,90
A55,55 0 1,1 140,90"
style="fill:none;"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
<path class="grey" d="M55,90
A55,55 0 1,1 140,90"
style="fill:none;"/>
<path class="red red-08" d="M55,90
A55,55 0 1,1 140,90"
style="fill:none;"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
<path class="grey" d="M55,90
A55,55 0 1,1 140,90"
style="fill:none;"/>
<path class="red red-09" d="M55,90
A55,55 0 1,1 140,90"
style="fill:none;"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
<path class="grey" d="M55,90
A55,55 0 1,1 140,90"
style="fill:none;"/>
<path class="red red-10" d="M55,90
A55,55 0 1,1 140,90"
style="fill:none;"/>
</svg>
</div>
https://codepen.io/shalinigandhi/pen/mdmmwdV

I've just created a plnker in Angular 2 which I think it's exactly what you want.
It manage the fill of the second arc with a variable:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100">
<path class="grey" d="M40,90 A40,40 0 1,1 60,90" style="fill:none;"/>
<path [ngStyle]="{'stroke-dashoffset':percentPath}" class="blue" d="M40,90 A40,40 0 1,1 60,90" style="fill:none;"/>
</svg>
Then, in the component I call a function which take the value from a slider with min=0 and max=100:
this.percentPath=(233-(V*2.33)); //233 is the maximun number stroke-dashoffset needs to disapear the second path
https://plnkr.co/edit/KNPThi?p=info
take it a look!

After not finding the answer I liked here I did some work myself and made a Codepen that you can use that makes progress bars exactly as you described with the inputs being: the amount of degrees of a circle that should be 100%, the radius of the circle and the percentage you to have filled.
Progress bar example (image)
HTML:
<section class="stat" id="sectionId">
<svg viewbox="0 0 100 100">
<path class="bar" d="
M 10, 50
a 40,40 0 1,0 80,0
a 40,40 0 1,0 -80,0
"/>
<path class="progress" d="
M 10, 50
a 40,40 0 1,0 80,0
a 40,40 0 1,0 -80,0
"/>
</svg>
<script type="text/javascript">
_.makeProgressBar("01", 240, 40, 86);
</script>
</section>
CSS:
.stat {
width: 200px;
}
svg {
display: block;
transform-origin: center center;
transform: rotate( 90deg );
}
path {
stroke-linecap: round;
stroke-width: 6px ;
fill:none;
}
JS:
_ = {};
//this is a self executing function, it keeps the global namespace clean
(function(win, doc, helper){
helper.makeProgressBar = function(id, totalDegrees, radius, percentage) {
var section = doc.getElementById(id);
var svg = section.children[0];
var bar = svg.children[0];
var progress = svg.children[1];
if(percentage > 100){
percentage = 100;
}
if(percentage < 0){
percentage = 0;
}
var percentageDegrees = calculateDegreesFromPercentage(totalDegrees, percentage);
var barDash = calculateDash(totalDegrees, radius);
var barGap = calculateDash ( 360 - totalDegrees, radius) * 2;
var progressDash = calculateDash(percentageDegrees, radius);
var progressGap = calculateDash(360 - percentageDegrees, radius) * 2;
var rotation = 0 - ((totalDegrees - percentageDegrees) / 2);
bar.setAttribute("style", "stroke: #707070; fill: none; stroke-dasharray: " + barDash + " " + barGap + ";");
progress.setAttribute("style", "stroke: #23CE39; fill: none; stroke-dasharray: " + progressDash + " " + progressGap + "; transform-origin: center center; transform: rotate("+ rotation +"deg)");
}
calculateDegreesFromPercentage = function(totalDegrees, percentage) {
return totalDegrees/100*percentage;
}
calculateDash = function(degrees, radius) {
return degrees * Math.PI / 180 * 0.5 * radius;
}
})(window, document, _);

Adding drop shadows to SVG symbols

I'm building a website that is very heavy on icons, so I'm working with SVG symbols to reduce duplication. In some cases the design calls for the symbols to have a drop shadow, and not in others. I'm struggling to figure out how I can add a drop shadow.
Example of my SVG:
<svg id="icons-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
...
<symbol id="icon-communications" viewBox="1400 0 200 200">
<title>Communications</title>
<rect style="fill: currentColor" x="1447.3" y="95.3" width="105.3" height="5.3"/>
<rect style="fill: currentColor" x="1447.3" y="78" width="105.3" height="5.3"/>
<polygon style="fill: currentColor" points="1463.2,127.9 1468,130.1 1475.7,113.6 1470.9,111.4 "/>
...
</symbol>
...
</svg>
I then include the icon on page using the standard:
<svg class="icon-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="#icon-communications"/>
</svg>
I can then set the color of the icon like this:
.icon-svg use {
color: blue;
}
.error .icon-svg use {
color: red;
}
But I can't figure out how to add a drop shadow. I've tried CSS box-shadow, and also filter: drop-shadow(), but neither seem to do anything. e.g.
.someClass .icon-svg use {
color: #fff;
-webkit-filter: drop-shadow( 0 0 20px #000 );
filter: drop-shadow( 0 0 20px #000 );
}
Any help would be appreciated.

Use an SVG Filter:
.icon-svg use {
color: blue;
}
.error .icon-svg use {
color: red;
}
.icon-svg {
-webkit-filter: url(#dropshadowy);
}
<svg id="icons-svg" >
<defs>
<filter id="dropshadowy">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<symbol id="icon-communications" viewBox="1400 0 200 200">
<title>Communications</title>
<rect style="fill: currentColor" x="1447.3" y="95.3" width="105.3" height="5.3"/>
<rect style="fill: currentColor" x="1447.3" y="78" width="105.3" height="5.3"/>
<polygon style="fill: currentColor" points="1463.2,127.9 1468,130.1 1475.7,113.6 1470.9,111.4 "/>
</symbol>
</defs>
</svg>
<svg class="icon-svg" >
<use xlink:href="#icon-communications"/>
</svg>

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

rotate svg fill path box - html

Add transform="rotate(180, 50, 50)" to the path .decor { fill: #F00; stroke: #e74c3c; } <svg class="decor" height="100%" viewBox="0 0 100 100" width="100%" preserveAspectRatio="none" > <path transform="rotate(180, 50, 50)" d="M0 0 L100 100 L0 100"></path> </svg>

Just do this: .decor { fill: #F00; stroke: #e74c3c; -webkit-transform: rotate(180deg); transform: rotate(180deg); } This will rotate it to be the way you want. Fiddle: http://jsfiddle.net/jkvp1x8m/

Related

How to put an image in SVG rounded corner hexagon using HTML and CSS?

animating an SVG <path> element in a <g> tag

SVG Fill Animation doesn't work on Firefox and Edge

Create and Filling arc progressively with css - circle progress bar

Adding drop shadows to SVG symbols

Categories

Resources