I'm struggling to make an animation work. I've created two SVG shapes in Illustrator with the same amount of path points. Now i want to code a morphing animation. My first try was an animate object as suggested here:
<span class="svgspan">
<svg class="svg1" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 398 369.4"
style="enable-background:new 0 0 398 369.4;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #FFFFFF;
}
</style>
<path id="pfad" class="st0" d="M398 184.7c0 51-20.7 97.2-54.1 130.6s-79.6 54.1-130.6 54.1s-97.2-20.7-130.6-54.1s-54.1-79.6-54.1-130.6
S49.3 87.5 82.7 54.1S162.3 0 213.3 0s97.2 20.7 130.6 54.1S398 133.7 398 184.7z">
<animate id="trs" begin="500ms" fill="freeze" attributename="d" dur="2s" from ="M398,184.7c0,51-20.7,97.2-54.1,130.6s-79.6,54.1-130.6,54.1s-97.2-20.7-130.6-54.1s-54.1-79.6-54.1-130.6
S49.3 87.5 82.7 54.1S162.3 0 213.3 0s97.2 20.7 130.6 54.1S398 133.7 398 184.7z" to="M195 369.4c-48.4-78-140.4-118.3-182.3-200.3C-3.8 131.7-6.1 85 17.2 50C57.9-16 157.7-15.8 199.1 49.4
c32.3-51.6 107.8-65.7 155.7-27.5c54.5 39.2 53.8 119.8 15.8 170.4c-49 65.4-124.1 107-167.6 177.1H195z"></path>
</svg></span>
I got an animation, but it didn't morph but instantly switch to the second path.
My next approach was a css animation like this:
#pfad {
d: path('M195,369.4c-48.4-78-140.4-118.3-182.3-200.3C-3.8,131.7-6.1,85,17.2,50C57.9-16,157.7-15.8,199.1,49.4c32.3-51.6,107.8-65.7,155.7-27.5c54.5,39.2,53.8,119.8,15.8,170.4c-49,65.4-124.1,107-167.6,177.1H195z');
transition: 1s;
}
This didn't work either. I even got an 'Unknown property: d' error in VS Code and Chrome:
It would be nice if someone could help me get this working.
Edit: The anchor points are in the right position now i guess, but i still have the same problem. New anchor points:
<path id="pfad" class="st0" d="M199,369.4c-57.6-0.5-110.6-27.4-144.1-69.2c-25.4-31.6-40.6-71.8-40.6-115.5C14.3,82.7,97,0,199,0
s184.7,82.7,184.7,184.7c0,33.7-9,65.3-24.8,92.5C326.9,332.3,267.3,369.4,199,369.4C198.4,369.4,199.6,369.4,199,369.4z">
<animate id="trs" begin="500ms" fill="freeze" attributename="d" dur="2s" from ="M199,369.4c-57.6-0.5-110.6-27.4-144.1-69.2c-25.4-31.6-40.6-71.8-40.6-115.5C14.3,82.7,97,0,199,0
s184.7,82.7,184.7,184.7c0,33.7-9,65.3-24.8,92.5C326.9,332.3,267.3,369.4,199,369.4C198.4,369.4,199.6,369.4,199,369.4z" to="M199,369.4C150.6,291.4,54.8,251,12.9,169C-3.6,131.6-5.9,84.9,17.4,49.9c40.7-66,140.5-65.8,181.9-0.6
C231.6-2.3,307.1-16.4,355,21.8c54.5,39.2,53.8,119.8,15.8,170.4C321.8,257.6,242.5,299.3,199,369.4L199,369.4z"></path>```
Like the comments suggest, it is a good idea to be precise with the point in the path. So, your code is ok. It is just the path that need a helping hand.
I copied your path to Inkscape and make the two shapes there.
path {
fill: red;
}
<span class="svgspan">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="200" height="200">
<path id="pfad" class="st0"
d="M 500,1000 C 220,1000 0,780 0,500 0,220 220,0 500,0 c 280,0 500,220 500,500 0,280 -220,500 -500,500 z">
<animate id="trs" begin="1s" fill="freeze" attributename="d" dur="2s"
from ="M 500,1000 C 220,1000 0,780 0,500 0,220 220,0 500,0 c 280,0 500,220 500,500 0,280 -220,500 -500,500 z"
to="M 500,1000 C 420,820 0,600 0,300 0,0 380,-120 500,150 620,-120 1000,0 1000,300 c 0,300 -420,520 -500,700 z" />
</path>
</svg>
</span>
The main condition for the implementation of smooth animation path changes
using the attribute d are:
Equal number of nodes in both shapes
Exact match of the node type (A; C; Q), respectively, for each point in the initial and final position of the path
These conditions can be met in different ways, but it is better to do this in the vector editor.
You must have the same number of node points by the heart and the circle
Below is a screenshot from Inkscape. Drag matching points from the outline of the heart to the outline of the circle
#chrwahl did this work in his answer while solving this problem
All credits to #chrwahl for a job well done
#jayjay9601 comments
I'll definitely try that even though i would prefer the html/css-only
version
Below is the complete CSS animation code using the d attribute:
.svgspan {
width:30vw;
height:30vh;
}
#pfad{
fill: crimson;
transition: all 1s ease-in-out;
}
#pfad:hover {
d: path("M 500,1000 C 420,820 0,600 0,300 0,0 380,-120 500,150 620,-120 1000,0 1000,300 c 0,300 -420,520 -500,700 z");
fill: red;
}
<div class="svgspan">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" >
<path id="pfad" class="st0"
d="M 500,1000 C 220,1000 0,780 0,500 0,220 220,0 500,0 c 280,0 500,220 500,500 0,280 -220,500 -500,500 z">
</path>
</svg>
</div>
How can i change the fill color of an SVG logo onScroll; ¿thats posible with html or any css property?
The color change when you scroll when on another DIV
The idea is to use mix-blend-mode: differencein CSS together with isolation: isolate; for the group.
It's up to you how you want to move the layers. I'm using an input type range for this. You may use scroll or wheel.
I hope this helps.
percent.addEventListener("input",()=>{
let val = ~~(percent.value);
let _var = map(100-val,0,100,3,27);
txt.textContent = val+"%";
pth.setAttributeNS(null,"d",`M3,27H27V${_var}H3z`)
})
function map(n, a, b, _a, _b) {
let d = b - a;
let _d = _b - _a;
let u = _d / d;
return _a + n * u;
}
svg{border:1px solid; font-size:10px; background:lightblue}
[type="range"]{width:150px;}
<svg viewBox="0 0 30 30" width="150">
<g style="isolation: isolate;">
<path d="M3,27H27V3H3z" fill="white" />
<path id="pth" d="M3,27H27V15H3z" />
<text id="txt" x="15" y="15" dominant-baseline="middle" text-anchor="middle" fill="white" style="mix-blend-mode: difference;">50%</text>
</g>
</svg>
<p><input id="percent" type="range" value="50" /></p>
I'm not even sure how to explain this.
I have a floor layout that is in a JPG format, I would like to enable user to mouseOver or click on different area of the map to get dynamically information about it. To get different area of the map interactive, I was thinking I could overlaid a dynamically SVG grid on top/or behind it, that way, I can assign the dynamic data to a grid coordinates.
I am having problem with implementing this, I can't get the grid and the image to resize with each other. Also, since the SVG grid is dynamic, when the image is bigger, by default, the my grid has more lines which throws the coordinates off when zoom in/out.
Is there away to generate a fixed grid (e.g., 20x10) matched and overlaid it to the image. Make it zoom with the image? I just got started with SVG today so any help would be greatly appreciated.
Code in Angular2
<svg attr.width="{{w}}" attr.height="{{h}}" id="mySVG">
<image xlink:href="../asset/building.jpg" x="0" y="0" height="100%" width="100%"/>
<rect x="0" y="0" attr.width="{{w}}" attr.height="{{h}}" stroke="black" fill="url(#GridPattern)" stroke-width="5"
class="hello"/>
<defs>
<pattern id="GridPattern" x="0" y="0" attr.width="{{wGap}}" attr.height="{{hGap}}" patternUnits="userSpaceOnUse">
<line x1="0" y1="0" attr.x2="{{wGap}}" y2="0" stroke="lightblue" stroke-width="1px" />
<line x1="0" y1="0" x2="0" attr.y2="{{hGap}}" stroke="lightblue" stroke-width="1px" />
</pattern>
</defs>
<g id="group1" fill="red">
<!--<rect x="1cm" y="1cm" width="1cm" height="1cm"/>
<rect x="3cm" y="1cm" width="1cm" height="1cm"/>-->
<text *ngFor="let h of loc" attr.x="{{h.x*wGap}}" attr.y="{{h.y*hGap}}" fill="red" text-anchor='middle'>{{h.text}},h:{{h.y*hGap}},w:{{h.x*wGap}}</text>
<text *ngFor="let x of xNum; let i = index" attr.x="{{i*wGap}}" y="20" fill="red" style="writing-mode: tb; glyph-orientation-vertical: 0;
letter-spacing: -3;" >{{i}}</text>
<text *ngFor="let x of yNum; let i = index" x="20" attr.y="{{i*hGap}}" fill="red">{{i}}</text>
</g>
</svg>
import {Component, OnInit,NgZone} from '#angular/core';
#Component({
selector: 'home',
template: require('./home.html')
})
export class Home implements OnInit{
bol:boolean = true;
w:number;
h:number;
wGap:number;
hGap:number;
hMultiplier:number = 30;
wMultiplier:number = 40;
yNum = new Array(this.hMultiplier);
xNum = new Array(this.wMultiplier);
hLine:any;
wLine:any;
loc:Object[] = [{x:37,y:3,text:"testing 1"},
{x:31,y:25,text:"testing 2"},
{x:2,y:9,text:"testing 3"},
{x:35,y:8,text:"testing 4"},
{x:22,y:10,text:"testing 5"}]
constructor(ngZone:NgZone){
console.log(this.xNum,this.yNum)
console.log(window.innerHeight, window.innerWidth);
this.w = window.innerWidth-50;
this.h = window.innerHeight-200;
this.wGap = Math.ceil(this.w/this.wMultiplier);
this.hGap = Math.ceil(this.h/this.hMultiplier);
//////
//this.calculateLocation();
window.onresize = (e)=>{
ngZone.run(()=>{
console.log(window.innerWidth,window.innerHeight);
//this.w = document.getElementById('bldImg')['width'];
//this.h = document.getElementById('bldImg')['height'];
this.w = window.innerWidth-50;
this.h = window.innerHeight-200;
this.wGap = Math.ceil(this.w/this.wGap);
this.hGap = Math.ceil(this.h/this.hGap);
//////
// this.calculateLocation();
console.log(this.wGap)
console.log(this.hGap)
});
}
}
ngOnInit(){
}
}
I managed to do it using svg tag and create my own interactive map using Angular version 4 you can view the plnkr in this link - Please view the code
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 800">
<svg:path
*ngFor="let country of countries; let i = index"
[attr.data-index]="i"
(mouseover)="countryHover = country.country_country"
(click)="clicked(i)"
class="blob"
[class.selected]="hasCountry(i)"
[attr.d]="country.country_path"
fill="currentColor">
</svg:path>
</svg>
Image of the Output incase if Plunker doesnt work
https://plnkr.co/edit/2heVmd7l4UokqR2OcNgm?p=preview
I am making circle menu, so I use SVG to create a circle, and now I want to show a link with some image inside of part of the circle. How i can do it? My code -
render(){
return(
<svg id={"menuLevel" + index} width={200} height={200}>
<path fill="white" stroke="rgba(0,0,0,0.2)" strokeWidth="2" d={"M"+width+","+width+" L"+previousX+", "+previousY+" A"+width+","+width+" 0 0,0 "+x+", "+y+" z"}></path>
</svg>
)
}
I tried something like this -
<path fill="white" stroke="rgba(0,0,0,0.2)" strokeWidth="2" d={"M"+width+","+width+" L"+previousX+", "+previousY+" A"+width+","+width+" 0 0,0 "+x+", "+y+" z"}>
<foreignobject x="120" y="120" width="180" height="180">
<Link ...><Image .../></Link>
</foreignobject>
</path>
But it doesn't work, this foreign object have still 0 width and 0 height and content doesn't show.
UPDATE
I need to assign link component to all path objects
<svg id={"menuLevel" + index} width={width*2+2} height={width*2+2}>
{arr.map(function(item){
let angleInRadians = -item * Math.PI / 180.0;
let previousX = x;
let previousY = y;
x = width + width * Math.cos(angleInRadians);
y = width + width * Math.sin(angleInRadians);
return(
<path fill="white" stroke="rgba(0,0,0,0.2)" strokeWidth="2" d={"M"+width+","+width+" L"+previousX+", "+previousY+" A"+width+","+width+" 0 0,0 "+x+", "+y+" z"}>
</path>
)
})}
</svg>
Please check it here JSFiddle. Use image element to add the image to SVG: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag
<svg width="5cm" height="4cm" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
<circle x="0" y="0" r="200"></circle>
<image xlink:href="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" x="0" y="0" height="200px" width="200px"/>
</svg>
Please note:
If you do not set the x or y attributes, they will be set to 0.
If you do not set the height or width attributes, they will be set to 0.
Having a height or width attribute of 0 will disable rendering of the image.
Update 1
Here is a working example to add a React component together with the image: JSFiddle. But I make the Link component as a sibling of the SVG, and then using absolute to position them. Not a perfect solution.
Update 2
To make a path clickable: JSFiddle.
Update 3
This is an image with clickable paths, integrated with ReactJS: JSFiddle:
var Link = React.createClass({
render: function() {
return <a className="link" href={this.props.href} target="_blank">{this.props.children}</a>
}
});
var Hello = React.createClass({
render: function() {
return <div id="container"><svg xmlns="http://www.w3.org/2000/svg" width="300px" height="300px">
<Link href="http://www.google.com">
<g transform="translate(100, 100)"><image href="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" x="0" y="0" height="200px" width="200px"/></g>
</Link>
<Link href="http://www.facebook.com">
<g><image href="https://www.facebook.com/images/fb_icon_325x325.png" x="0" y="0" height="100px" width="100px"/></g>
</Link>
</svg></div>
}
});