I have used the SMIL animate tag but morphing of one shape to another shape is not working.
Please see my svg file and let me know about any kind of solution.
I have already tried tag and CSS for this animation but neither solution worked.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg 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 1080 1080" style="enable-background:new 0 0 1080 1080;" xml:space="preserve">
<style type="text/css">
.st0{fill:#2758F6;}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg 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 1080 1080" style="enable-background:new 0 0 1080 1080;" xml:space="preserve">
<style type="text/css">
.st0{fill:#2758F6;}
</style>
<path>
<animate repeatCount="indefinite" attributeName="d" dur="5s"
values="M917.58,565.98L192.42,984.66c-20,11.55-45-2.89-45-25.98V121.32c0-23.09,25-37.53,45-25.98
l725.17,418.68C937.58,525.57,937.58,554.43,917.58,565.98z;
M905.06,935.06H174.94c-16.57,0-30-13.43-30-30V174.94c0-16.57,13.43-30,30-30h730.12
c16.57,0,30,13.43,30,30v730.12C935.06,921.63,921.63,935.06,905.06,935.06z;
M917.58,565.98L192.42,984.66c-20,11.55-45-2.89-45-25.98V121.32c0-23.09,25-37.53,45-25.98
l725.17,418.68C937.58,525.57,937.58,554.43,917.58,565.98z
"></animate>
</path>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg 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 1080 1080" style="enable-background:new 0 0 1080 1080;" xml:space="preserve">
<style type="text/css">
.st0{fill:#2758F6;}
</style>
<path>
<animate repeatCount="indefinite" attributeName="d" dur="5s"
values="M917.58,565.98L192.42,984.66c-20,11.55-45-2.89-45-25.98V121.32c0-23.09,25-37.53,45-25.98
l725.17,418.68C937.58,525.57,937.58,554.43,917.58,565.98z;
M905.06,935.06H174.94c-16.57,0-30-13.43-30-30V174.94c0-16.57,13.43-30,30-30h730.12
c16.57,0,30,13.43,30,30v730.12C935.06,921.63,921.63,935.06,905.06,935.06z;
M917.58,565.98L192.42,984.66c-20,11.55-45-2.89-45-25.98V121.32c0-23.09,25-37.53,45-25.98
l725.17,418.68C937.58,525.57,937.58,554.43,917.58,565.98z
"></animate>
</path>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg 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 1080 1080" style="enable-background:new 0 0 1080 1080;" xml:space="preserve">
<style type="text/css">
.st0{fill:#2758F6;}
</style>
<path>
<animate repeatCount="indefinite" attributeName="d" dur="5s"
values="M917.58,565.98L192.42,984.66c-20,11.55-45-2.89-45-25.98V121.32c0-23.09,25-37.53,45-25.98
l725.17,418.68C937.58,525.57,937.58,554.43,917.58,565.98z;
M905.06,935.06H174.94c-16.57,0-30-13.43-30-30V174.94c0-16.57,13.43-30,30-30h730.12
c16.57,0,30,13.43,30,30v730.12C935.06,921.63,921.63,935.06,905.06,935.06z;
M917.58,565.98L192.42,984.66c-20,11.55-45-2.89-45-25.98V121.32c0-23.09,25-37.53,45-25.98
l725.17,418.68C937.58,525.57,937.58,554.43,917.58,565.98z
"></animate>
</path>
</svg>
</style>
<path>
<animate repeatCount="indefinite" attributeName="d" dur="5s"
values="M917.58,565.98L192.42,984.66c-20,11.55-45-2.89-45-25.98V121.32c0-23.09,25-37.53,45-25.98
l725.17,418.68C937.58,525.57,937.58,554.43,917.58,565.98z;
M905.06,935.06H174.94c-16.57,0-30-13.43-30-30V174.94c0-16.57,13.43-30,30-30h730.12
c16.57,0,30,13.43,30,30v730.12C935.06,921.63,921.63,935.06,905.06,935.06z;
M917.58,565.98L192.42,984.66c-20,11.55-45-2.89-45-25.98V121.32c0-23.09,25-37.53,45-25.98
l725.17,418.68C937.58,525.57,937.58,554.43,917.58,565.98z
"></animate>
</path>
</svg>
Triangle should morph in square.
In order to smoothly animate all the paths need to have the same type and number of commands in the same order. Your paths don't meet that requirement e.g.
<animate repeatCount="indefinite" attributeName="d" dur="5s"
values="M917.58,565.98L192.42,984.66....;
M905.06,935.06H174.94....;
M917.58,565.98L192.42....
The second command in the middle path is an H, in the other two paths it's an L. Such disparate paths will not morph.
On firefox the left edges of these SVGs are getting cut off at a certain windows size:
In Chrome its working. Does anybody knows why this is happening?
Some Firefox-internal bug? I already removed all styles from the svg, but its still not working. Setting the width to 100% isn't working either.
Contact SVG Source Code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="77px" height="30px" viewBox="0 0 77 30" enable-background="new 0 0 77 30" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#333333" d="M0,15c0,7.95,6.18,14.45,14,14.97c0.33,0.02,0.66,0.03,1,0.03h46
v-0.03c0.33,0.02,0.66,0.03,1,0.03c8.28,0,15-6.72,15-15S70.28,0,62,0c-0.34,0-0.67,0.01-1,0.03V0H15c-0.34,0-0.67,0.01-1,0.03
C6.18,0.55,0,7.05,0,15z M14,29.97V30h1C14.66,30,14.33,29.99,14,29.97z M15,0h-1v0.03C14.33,0.01,14.66,0,15,0z"/>
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M14.59,17.11c0.22,0.62,0.52,1.16,0.91,1.58
c0.38,0.43,0.83,0.76,1.36,0.98c0.53,0.22,1.09,0.33,1.72,0.33c0.62,0,1.19-0.11,1.69-0.34c0.48-0.22,0.92-0.55,1.31-0.99
l-0.7-0.76c-0.32,0.36-0.66,0.62-1.02,0.81C19.5,18.91,19.08,19,18.61,19c-0.47,0-0.89-0.09-1.27-0.28
c-0.37-0.19-0.7-0.45-0.95-0.81c-0.26-0.35-0.47-0.77-0.61-1.27c-0.15-0.48-0.22-1.05-0.22-1.67c0-0.6,0.07-1.14,0.22-1.64
c0.16-0.49,0.36-0.91,0.64-1.25c0.27-0.35,0.6-0.61,0.97-0.8C17.77,11.09,18.2,11,18.67,11c0.42,0,0.8,0.09,1.11,0.25
c0.31,0.16,0.6,0.37,0.86,0.66l0.7-0.8c-0.29-0.28-0.67-0.55-1.11-0.77C19.78,10.12,19.25,10,18.66,10c-0.63,0-1.22,0.12-1.75,0.34
c-0.53,0.24-1,0.57-1.39,1c-0.39,0.44-0.69,0.96-0.91,1.58c-0.22,0.63-0.33,1.31-0.33,2.08C14.28,15.78,14.38,16.48,14.59,17.11z"
/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M24.61,15.5c0.09-0.31,0.23-0.58,0.42-0.8
c0.19-0.22,0.41-0.39,0.67-0.51c0.25-0.13,0.55-0.19,0.86-0.19c0.32,0,0.6,0.06,0.86,0.19c0.25,0.12,0.47,0.29,0.66,0.51
c0.19,0.22,0.33,0.49,0.44,0.8c0.09,0.31,0.15,0.64,0.15,1.02c0,0.37-0.06,0.71-0.15,1.01c-0.11,0.31-0.25,0.56-0.44,0.78
c-0.19,0.22-0.41,0.39-0.66,0.52C27.16,18.95,26.88,19,26.56,19c-0.31,0-0.61-0.05-0.86-0.17c-0.26-0.13-0.48-0.3-0.67-0.52
c-0.19-0.22-0.33-0.47-0.42-0.78c-0.09-0.3-0.14-0.64-0.14-1.01C24.47,16.14,24.52,15.81,24.61,15.5z M23.47,18
c0.19,0.44,0.42,0.8,0.73,1.09c0.32,0.3,0.68,0.52,1.08,0.68c0.41,0.15,0.83,0.23,1.28,0.23c0.44,0,0.88-0.08,1.28-0.23
c0.41-0.16,0.77-0.38,1.08-0.68c0.31-0.29,0.55-0.65,0.74-1.09c0.18-0.44,0.28-0.92,0.28-1.48c0-0.57-0.1-1.05-0.28-1.49
c-0.19-0.44-0.43-0.8-0.74-1.11c-0.31-0.3-0.67-0.53-1.08-0.69C27.44,13.08,27,13,26.56,13c-0.45,0-0.87,0.08-1.28,0.23
c-0.4,0.16-0.76,0.39-1.08,0.69c-0.31,0.31-0.54,0.67-0.73,1.11c-0.19,0.44-0.28,0.92-0.28,1.49C23.19,17.08,23.28,17.56,23.47,18z
"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M31.73,20h1.22v-4.98c0.38-0.33,0.71-0.58,1-0.75
c0.28-0.18,0.63-0.27,1-0.27c0.47,0,0.83,0.16,1.05,0.44c0.22,0.28,0.33,0.75,0.33,1.39V20h1.23v-4.33c0-0.87-0.18-1.55-0.53-2
C36.67,13.23,36.11,13,35.34,13c-0.51,0-0.96,0.11-1.34,0.3c-0.39,0.18-0.75,0.43-1.09,0.72h-0.05L32.75,13h-1.02V20z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M39.94,17.75c0,0.34,0.03,0.64,0.11,0.92
c0.06,0.28,0.18,0.52,0.34,0.7c0.16,0.21,0.38,0.36,0.64,0.47c0.27,0.11,0.6,0.16,1,0.16c0.22,0,0.45-0.02,0.69-0.08l0.66-0.19
l-0.24-0.92c-0.12,0.06-0.26,0.11-0.42,0.14C42.56,18.98,42.44,19,42.31,19c-0.42,0-0.72-0.11-0.87-0.33
c-0.17-0.22-0.25-0.55-0.25-0.97V14h1.97v-1h-1.97v-2.03h-1.03L40,13l-1.14,0.08V14h1.08V17.75z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M45.75,17.8c0.11-0.13,0.3-0.25,0.55-0.35
c0.25-0.09,0.59-0.18,1.01-0.26c0.41-0.07,0.92-0.13,1.55-0.19v1.19c-0.36,0.28-0.69,0.48-1,0.61c-0.31,0.14-0.66,0.2-1,0.2
c-0.38,0-0.67-0.05-0.92-0.17c-0.25-0.13-0.36-0.33-0.36-0.61C45.58,18.06,45.63,17.92,45.75,17.8z M44.97,19.55
c0.41,0.31,0.92,0.45,1.55,0.45c0.43,0,0.87-0.08,1.28-0.23c0.4-0.16,0.78-0.35,1.14-0.58h0.01L49.06,20h1.02v-4.19
c0-0.84-0.2-1.53-0.6-2.04c-0.4-0.5-1.04-0.77-1.93-0.77c-0.6,0-1.13,0.11-1.63,0.31c-0.5,0.21-0.9,0.41-1.23,0.61l0.5,0.86
c0.28-0.19,0.59-0.37,0.97-0.53c0.36-0.16,0.76-0.25,1.2-0.25c0.3,0,0.55,0.06,0.73,0.17c0.19,0.13,0.33,0.27,0.46,0.45
c0.11,0.19,0.18,0.41,0.23,0.65c0.05,0.25,0.08,0.48,0.08,0.73c-1.56,0.16-2.7,0.41-3.42,0.75c-0.72,0.36-1.06,0.87-1.06,1.53
C44.38,18.83,44.56,19.25,44.97,19.55z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M52.45,18c0.18,0.44,0.41,0.8,0.72,1.09
c0.3,0.3,0.66,0.52,1.08,0.68c0.42,0.15,0.88,0.23,1.36,0.23c0.44,0,0.86-0.08,1.27-0.25c0.4-0.16,0.76-0.39,1.1-0.67l-0.56-0.81
c-0.22,0.2-0.48,0.37-0.76,0.51c-0.28,0.16-0.6,0.22-0.94,0.22c-0.34,0-0.64-0.05-0.92-0.17c-0.28-0.13-0.53-0.3-0.72-0.52
c-0.19-0.22-0.35-0.47-0.45-0.78c-0.11-0.3-0.16-0.64-0.16-1.01c0-0.38,0.05-0.71,0.17-1.02c0.11-0.31,0.27-0.58,0.47-0.8
c0.19-0.22,0.44-0.39,0.72-0.51c0.28-0.13,0.58-0.19,0.92-0.19c0.28,0,0.55,0.06,0.78,0.19c0.24,0.12,0.47,0.26,0.69,0.45
l0.61-0.78c-0.25-0.22-0.55-0.42-0.89-0.59C56.59,13.09,56.17,13,55.7,13c-0.47,0-0.92,0.08-1.34,0.23
c-0.44,0.16-0.81,0.39-1.13,0.69c-0.31,0.31-0.57,0.67-0.76,1.11c-0.19,0.44-0.28,0.92-0.28,1.49C52.19,17.08,52.27,17.56,52.45,18
z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M59.94,17.75c0,0.34,0.03,0.64,0.11,0.92
c0.06,0.28,0.18,0.52,0.34,0.7c0.16,0.21,0.38,0.36,0.64,0.47c0.27,0.11,0.6,0.16,1,0.16c0.22,0,0.45-0.02,0.69-0.08l0.66-0.19
l-0.24-0.92c-0.12,0.06-0.26,0.11-0.42,0.14C62.56,18.98,62.44,19,62.31,19c-0.42,0-0.72-0.11-0.87-0.33
c-0.17-0.22-0.25-0.55-0.25-0.97V14h1.97v-1h-1.97v-2.03h-1.03L60,13l-1.14,0.08V14h1.08V17.75z"/>
</g>
</svg>
The website is made with wordpress, so the SVG's are getting implemented by wordpress.
I probably could fix that, by adjusting the view size of the SVG's, but i would have to do that with js and thats pretty dirty.
For me worked svg {overflow: visible;} . So far spotted this issue in Firefox only.
Hi I am new on this site so please forgive me if i am not clear about what i am trying to do
My Question is:-
I am using HTML5 and SVG to clip the image so that only the part of the image that is inside the clipping/polygon shape is displayed while any part outside the polygon shape is invisible/clipped
Also I wish to add stroke width and color to the polygon shape
The SVG code that i am using:-
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg 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"
width="455px" height="435px" viewPort="0 0 455 435" enable-background="new 0 0 455 435" xml:space="preserve">
<g>
<g>
<clipPath ID="SVGID_1_">
<path fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
</clipPath>
</g>
</g>
<a xlink:href="#">
<image clip-path="url(#SVGID_1_)" height="500" width="667" style="border-color:black;border-width:5;" xlink:href="img.jpg" />
</a>
</svg>
The above mentioned code works fine, it display's an image that has a polygon shape, only the image part falling inside the shape is displayed whereas any part falling outside the shape is hidden
But somehow I tried various things but still i am not able to display stroke/border.
My question is how to display the border/stroke on a polygon shape that is used to clip an image
Thanks in advance
At first, please write ID in small letters in order to make the clip path work: <clipPath id="SVGID_1_">
Second, just duplicate your path in order to use is as regular shape.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg 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"
width="455px" height="435px" viewPort="0 0 455 435" enable-background="new 0 0 455 435" xml:space="preserve">
<g>
<g>
<clipPath id="SVGID_1_">
<path fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
</clipPath>
<path fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
</g>
</g>
<a xlink:href="#">
<image clip-path="url(#SVGID_1_)" height="500" width="667" style="border-color:black;border-width:5px;" xlink:href="img.jpg" />
</a>
</svg>
Alternatively, you can define you path as a shape and just refer to its name afterwards:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg 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"
width="455px" height="435px" viewPort="0 0 455 435" enable-background="new 0 0 455 435" xml:space="preserve">
<defs>
<path id="myPath" fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
</defs>
<g>
<g>
<clipPath id="SVGID_1_">
<use xlink:href="#myPath" x="0" y="0"/>
</clipPath>
<use xlink:href="#myPath" x="0" y="0"/>
</g>
</g>
<a xlink:href="#">
<image clip-path="url(#SVGID_1_)" height="500" width="667" style="border-color:black;border-width:5px;" xlink:href="img.jpg" />
</a>
</svg>
Check out this doc.
Here you are using an image from within the SVG but if suppose you are using clip path on the image in your html code, you won't be able to give it border this way.
To achieve that you can apply the clip-path to the container div of the image too and then give it a background and border of the same color.