Not sure this is possible, so I have a back-up plan (use a background image and :after to mask one of 3x transarent PNGs with the border in the image and use nth-child to change them).
Here's what I'm trying to accomplish. I know clip-path will give me the image mask, but I need the curved edges and the border color, too. Which I don't think is possible in pure CSS.
<!DOCTYPE html>
<html>
<style>
img {
max-width: 100%;
display: block;
}
.container {
width: 300px;
height: 300px;
margin: 1em auto;
}
.frame-border {
stroke: #10c020;
stroke-width: 4;
}
</style>
<body>
<div class="container">
<svg viewBox="-10 -10 120 120">
<defs>
<mask id="mask">
<rect fill="#000000" x="0" y="0" width="300" height="300"></rect>
<path id="Path_611" data-name="Path 611" d="M1,38a12.225,12.225,0,0,1,2.558-3.025L41.351,13.462A21.12,21.12,0,0,1,46.733,12.4a14.319,14.319,0,0,1,4.81.765L89.2,34.814A7.333,7.333,0,0,1,92,37a7.273,7.273,0,0,1,1,3.4v45.3A6.741,6.741,0,0,1,92,89a12.9,12.9,0,0,1-3.015,2.945L50.42,110.628a8.953,8.953,0,0,1-3.688.786,13.383,13.383,0,0,1-4.153-.992L4.2,92.012A12.105,12.105,0,0,1,1,89a7.112,7.112,0,0,1-1-3.581V41.534A9.569,9.569,0,0,1,1,38Z" transform="translate(1.502 -10.892)" fill="#FFFFFF"/>
</mask>
</defs>
<image mask="url(#mask)"
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://randomuser.me/api/portraits/women/47.jpg" width="100" height="100">
</image>
<g class="frame-border" fill="none">
<path id="Path_611" data-name="Path 611" d="M1,38a12.225,12.225,0,0,1,2.558-3.025L41.351,13.462A21.12,21.12,0,0,1,46.733,12.4a14.319,14.319,0,0,1,4.81.765L89.2,34.814A7.333,7.333,0,0,1,92,37a7.273,7.273,0,0,1,1,3.4v45.3A6.741,6.741,0,0,1,92,89a12.9,12.9,0,0,1-3.015,2.945L50.42,110.628a8.953,8.953,0,0,1-3.688.786,13.383,13.383,0,0,1-4.153-.992L4.2,92.012A12.105,12.105,0,0,1,1,89a7.112,7.112,0,0,1-1-3.581V41.534A9.569,9.569,0,0,1,1,38Z" transform="translate(1.502 -10.892)" stroke-linecap="round" />
</g>
</svg>
</div>
</body>
</html>
I am using fabric JS 1.6.2. And after applied opacity to image object, generated SVG File. This svg file open in browser & InkScape. Both show much different in color.
Actually proof of canvas is generated different in color with SVG of InkScape. This issue is happened while applied opacity.
SVG With Browser:
Same Svg with InkScape
Original Image which added in design:
Here is content of SVG FILE :
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="380" height="380" viewBox="0 0 380 380" xml:space="preserve">
<desc>Created with Fabric.js 1.7.13</desc>
<defs>
</defs>
<g transform="translate(190 174) scale(0.543338 0.543338)">
<image xlink:href="1-original.jpg" x="-386.5" y="-500" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 0.5;" width="773" height="1000" preserveAspectRatio="none"></image>
</g>
</svg>
Looks like it was a bug with 0.91 (I could reproduce that it looks paler there). Update to 0.92.3 (looked exactly the same as in the browser there).
Creating a svg from adobe xd and trying to create a hover effect for the svg can change fill: colors on hover.
# Heres the svg code #
<svg xmlns="http://www.w3.org/2000/svg" viewBox="1563 3492 45 45">
<defs>
<style>
.cls-1 {
fill: #79bf73;
font-size: 45px;
font-family: SegoeMDL2Assets, Segoe MDL2 Assets;
}
</style>
</defs>
<text id="E1CC" class="cls-1" transform="translate(1563 3537)"><tspan x="0" y="0"></tspan></text>
</svg>
# Heres the html code #
<div class="play">
<img src="http:localhost/mockup3/images/E101.svg" height="42" width="42">
</div>
# Heres the css code #
svg text #E101:hover{
fill: #003565;
}
SVGs inserted as img can't have interaction, they behave as images. To fix this, simply put the full SVG code inline. Cleaned up the code a bit, as these tools often produce ugly code.
HTML
<div class="play">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="1563 3492 45 45" width="42" height="42">
<text id="E1CC" class="cls-1" transform="translate(1563 3537)"><tspan x="0" y="0"></tspan></text>
</svg>
</div>
CSS
svg text {
fill: #79bf73;
font-size: 45px;
font-family: SegoeMDL2Assets, Segoe MDL2 Assets;
}
svg text:hover{
fill: #003565;
}
Keep in mind the icon will only be visible with the font Segoe MDL2 Assets installed.
I want to add ease-in-out over hover efect in svg map. I am creating the hover by stroke-width of the path. Is this possible at all?
Any other suggesting for creating such hovers in svg maps with easing are welcome. Thank you!
Link to Codepen
<!DOCTYPE html>
<html>
<head xmlns="http://www.w3.org/1999/xlink">
<meta charset="UTF-8">
<title>SVG Hover</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" height="56mm" width="56mm" version="1.1" viewBox="0 0 200 200">
<g id="layer1" transform="translate(-277.14 -332.36)">
<rect id="rect3336" height="200" width="200" y="332.36" x="277.14" fill="#cecece"/>
<circle id="path4138" cx="380" cy="430" r="15"
onmouseover="this.style.stroke = '#3f27dd'; this.style['stroke-width'] = 50; this.style['stroke-opacity'] = 0.7;"
onmouseout="this.style.stroke = '#3f27dd'; this.style['stroke-width'] = 0;"/>
</g>
</body>
</html>
I don't know how to do it with JavaScript but I was able to do it with CSS. EDIT: I know but CSS looks cleaner.
JSfiddle
Here is my code:
<body>
<svg xmlns="http://www.w3.org/2000/svg" height="56mm" width="56mm" version="1.1" viewBox="0 0 200 200">
<g id="layer1" transform="translate(-277.14 -332.36)">
<rect id="rect3336" height="200" width="200" y="332.36" x="277.14" fill="#cecece"/>
<circle id="path4138" cx="380" cy="430" r="15"
/>
</g>
And CSS:
#path4138 {
transition: stroke-width 0.3s ease-in;
stroke: #3f27dd;
stroke-width: 0;
stroke-opacity: 0.7;
fill: pink;
pointer-events:all;
}
#path4138:hover {
stroke-width: 50;
fill: red;
transition: stroke-width 0.3s ease-out;
}