Related
Is there a way to stop this outline in firefox?
#blob { background: red; width: 500px; height: 500px; clip-path: url(#myClip); transform: rotate(20deg);}
<div id="blob"></div>
<svg>
<defs>
<path d="M320.403196,424.677624 C426.787532,365.585154 447.310044,306.188587 433.45394,197.28033 C419.597836,88.3720737 316.997962,53.8862578 227.347416,40.9086547 C144.650118,28.9375873 104.472702,88.6407456 69.862267,131.812053 C15.52584,199.588564 48.3439099,300.905451 80.8563197,361.757908 C110.80391,417.809872 214.018859,483.770094 320.403196,424.677624 Z" id="path-1"></path>
<clipPath id="myClip"><use href="#path-1"></use></clipPath>
</defs>
</svg>
This renders correctly in other browsers, just need some work around for this firefox bug
same outline appears using either clip-path or mask
As a workaround you could rotate the clipPath instead:
#blob {
background: red;
width: 500px;
height: 500px;
clip-path: url(#myClip);
}
<div id="blob"></div>
<svg viewBox="0 0 397 409">
<defs>
<path d="M320.403196,424.677624 C426.787532,365.585154 447.310044,306.188587 433.45394,197.28033 C419.597836,88.3720737 316.997962,53.8862578 227.347416,40.9086547 C144.650118,28.9375873 104.472702,88.6407456 69.862267,131.812053 C15.52584,199.588564 48.3439099,300.905451 80.8563197,361.757908 C110.80391,417.809872 214.018859,483.770094 320.403196,424.677624 Z" id="path-1" />
<clipPath id="myClip" transform="rotate(20)" transform-origin="center">
<use href="#path-1"></use>
</clipPath>
</defs>
</svg>
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 want to keep my polygon circle and path width same width and height on all devices for example 50px height and 50px width, because they are streched on mobile devices, or if there is another solution.
i deleted some css classes and other svg objects so code can be seen as simple.
<svg preserveAspectRatio="none" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 734 414">
<g id="bg">
<rect class="cls-1" x="-0.01" y="0.96" width="733.99" height="92.47" />
<g id="bg_elements">
<path class="cls-2" d="M734,414H0V81.84s56,2.53,74.56,2.73c22,.23,64.67-3,86.71-2.86,24.83.18,109.22,6.38,136.17,7.46,45.2,1.8,105-5.57,149.73-7.27,39.45-1.51,118.14,3.66,157.5,3.66,32.42,0,129.33-5.29,129.33-5.29Z" />
<g id="elements">
<polygon id="triangle" class="cls-3" points="32.27 247.14 23.13 224.36 7.97 243.67 32.27 247.14" />
<circle id="ellipse" class="cls-4" cx="317.06" cy="160.33" r="12.53" />
<polygon id="triangle_s" class="cls-5" points="460.08 371.37 448.65 376.05 438.89 383.61 440.56 371.37 438.89 359.14 448.65 366.7 460.08 371.37" />
<path id="plus" class="cls-6" d="M651.11,227l-13.62,21.69m-4-
17.66,21.7,13.63" />
</g>
</g>
</g>
</svg>
If the svg has the viewBox and preserveAspectRatio all set, another place possibility is to use a container div and font-size something like:
<div style="height: 50px; width: 50px; fontSize: 50px">
<svg>...</svg>
</div>
Your requirements are not clear. But perhaps what you want, is for the SVG to cover the whole of the viewport whilst still staying unstretched/unsquashed. Ie. the equivalent of background-size: cover for HTML elements.
If that is the case, then what you want is:
preserveAspectRatio="xMidYMid slice"
This will size the SVG up or down so that it is the minimum size that still entirely covers the whole of the viewport. However you may end up with some parts of the SVG getting clipped off the edges.
svg {
width: 400px;
height: 300px;
}
path {
fill: red;
}
circle {
fill: blue;
}
polygon {
fill: yellow;
}
<svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 734 414">
<g id="bg">
<rect class="cls-1" x="-0.01" y="0.96" width="733.99" height="92.47" />
<g id="bg_elements">
<path class="cls-2" d="M734,414H0V81.84s56,2.53,74.56,2.73c22,.23,64.67-3,86.71-2.86,24.83.18,109.22,6.38,136.17,7.46,45.2,1.8,105-5.57,149.73-7.27,39.45-1.51,118.14,3.66,157.5,3.66,32.42,0,129.33-5.29,129.33-5.29Z" />
<g id="elements">
<polygon id="triangle" class="cls-3" points="32.27 247.14 23.13 224.36 7.97 243.67 32.27 247.14" />
<circle id="ellipse" class="cls-4" cx="317.06" cy="160.33" r="12.53" />
<polygon id="triangle_s" class="cls-5" points="460.08 371.37 448.65 376.05 438.89 383.61 440.56 371.37 438.89 359.14 448.65 366.7 460.08 371.37" />
<path id="plus" class="cls-6" d="M651.11,227l-13.62,21.69m-4-
17.66,21.7,13.63" />
</g>
</g>
</g>
</svg>
I would like to know if it is possible to target the below image tag, located in an SVG, and style it externally with CSS.
<g id="Vector_Smart_Object_xA0_Image_1_" class="trapSVG" >
<image style="overflow:visible;" width="15" height="15" id="Vector_Smart_Object_xA0_Image" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA
GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZlJREFUeNqcUz1LA0EQfbN3SYwf
+IEWBpSQRhAtLCy0EWws/QGCP8JKbEUri1QWaiEGLewsbQQb2xQJNoKIQgwqaooEk0t2nDlyEE1C
jAOzO+x7b3Znd5bQbEZ8zgVmZR6vAhGJyxI/S5yROS1uA7L7SzwWAtY8YHmSzGycKBYBhcvgygNz
7p5tRvArwU+F+6oCahQ7wNYQ0fqqcUcWyUGCDHoFKImLGDdcw4Wtvn8yn9SA3SCJf2w5yvYwUXnH
jdjHcD9zeKDJdV1x5Sm/Xq5v8xK9bzhhW2whbHTFlad81TmqlmEzBlo6DEVp9EdVzSZ3gGnj0HnN
ixaBL1O/iJUlKWKigzgw5SlfdX4CeZP4DBl0Y8pXXXeqNk2jw0OWbVdC5avOT8DA5bWt4kmjP5jy
lK86P4E0RSoH/kjWKlzqIFZcecpXnVNfz0vQdwu7YAgmToYGW7yI7nxgPd63niftnJSiz4IEegNZ
WexJs53Kg6NvQi4I8CLznfiVtHHKeji23keB+Uh23xO4SO0+U+Ifn+lf3/lbgAEAuN/KQ8s2cHgA
AAAASUVORK5CYII=" transform="matrix(0.75 0 0 0.75 913.5 276.75)">
</image>
</g>
</svg>
Sure, if you are using inline SVG.
#Vector_Smart_Object_xA0_Image {
transform: rotate(45deg);
}
#svg-rect {
fill: transparent;
stroke: gray;
stroke-width: .5px;
transition: fill .25s;
}
#svg-rect:hover {
fill: yellow;
}
<g id="Vector_Smart_Object_xA0_Image_1_" class="trapSVG" >
<image style="overflow:visible;" width="15" height="15" id="Vector_Smart_Object_xA0_Image" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA
GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZlJREFUeNqcUz1LA0EQfbN3SYwf
+IEWBpSQRhAtLCy0EWws/QGCP8JKbEUri1QWaiEGLewsbQQb2xQJNoKIQgwqaooEk0t2nDlyEE1C
jAOzO+x7b3Znd5bQbEZ8zgVmZR6vAhGJyxI/S5yROS1uA7L7SzwWAtY8YHmSzGycKBYBhcvgygNz
7p5tRvArwU+F+6oCahQ7wNYQ0fqqcUcWyUGCDHoFKImLGDdcw4Wtvn8yn9SA3SCJf2w5yvYwUXnH
jdjHcD9zeKDJdV1x5Sm/Xq5v8xK9bzhhW2whbHTFlad81TmqlmEzBlo6DEVp9EdVzSZ3gGnj0HnN
ixaBL1O/iJUlKWKigzgw5SlfdX4CeZP4DBl0Y8pXXXeqNk2jw0OWbVdC5avOT8DA5bWt4kmjP5jy
lK86P4E0RSoH/kjWKlzqIFZcecpXnVNfz0vQdwu7YAgmToYGW7yI7nxgPd63niftnJSiz4IEegNZ
WexJs53Kg6NvQi4I8CLznfiVtHHKeji23keB+Uh23xO4SO0+U+Ifn+lf3/lbgAEAuN/KQ8s2cHgA
AAAASUVORK5CYII=" transform="matrix(0.75 0 0 0.75 913.5 276.75)">
</image>
</g>
</svg>
<svg width="20" height="20">
<rect id="svg-rect" width="15" height="15" x="2" y="2"></rect>
</svg>
Is this just example image? It would be much simpler to use SVG rect element for this.
I create an image inside a svg but want to round it and fill the shape (small circle).
I already did image round in html image tag using css style but not know how i can do it in side a svg or apply same css style in svg. Here is a code:
<HTML>
<HEAD>
<style>
.pic-circle-corner {
display: block;
width: 25px;
height: 25px;
/* margin: .8em auto; */
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 5px ; /* solid #eee*/
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
}
</style>
</HEAD>
<BODY>
<div> picture should fill inside round shape..
<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="40px" height="40px" viewBox="0 0 40 40" enable- background="new 0 0 40 40" xml:space="preserve">
<filter id="this_image" x="0%" y="0%" width="100%" height="100%">
<feImage width="28px" height="28px" xlink:href="http://pic.1fotonin.com/data/wallpapers/1/WDF_499177.jpg"/>
</filter>
<circle cx="46" cy="42" r="40" stroke="black" stroke-width="3" filter="url(#this_image)" />
<path fill-rule="evenodd" clip-rule="evenodd" fill="#026890" d="M35.686,13.595c-0.172-1.381-0.541-2.705-1.085-3.979
c-0.517-1.208-1.19-2.327-1.995-3.37c-0.758-0.982-1.629-1.855-2.593-2.629c-1.124-0.901-2.359-1.633-3.688-2.197
c-1.44-0.613-2.941-1.011-4.497-1.179c-2.306-0.252-4.575-0.041-6.787,0.672c-1.006,0.324-1.975,0.741-2.896,1.261
c-1.782,1.007-3.32,2.295-4.606,3.889C6.355,7.53,5.472,9.165,4.893,10.956c-0.397,1.23-0.63,2.498-0.694,3.793
c-0.057,1.153-0.017,2.301,0.175,3.438c0.158,0.944,0.415,1.866,0.749,2.767c0.369,0.994,0.842,1.938,1.434,2.815
c0.666,0.986,1.373,1.944,2.053,2.921c1.443,2.076,10.465,12.023,11.379,13.173c1.063-1.314,10.533-11.896,13.064-15.517
c0.96-1.372,1.713-2.839,2.175-4.453c0.242-0.849,0.427-1.708,0.52-2.586C35.875,16.068,35.84,14.832,35.686,13.595z M20,28.318
c-7.041,0-12.75-5.709-12.75-12.751S12.958,2.817,20,2.817c7.042,0,12.75,5.708,12.75,12.75S27.042,28.318,20,28.318z"/>
</svg>
</div>
<div style="padding-top:50px;">
<image class="pic-circle-corner" src="http://pic.1fotonin.com/data/wallpapers/1/WDF_499177.jpg">
</div>
</BODY>
</HTML>
Can someone tell me a correct way.
these are some options:
1) absolute position - place the SVG path inside a container and place an absolute positioned circled div with a background image on top of the path.
HTML/SVG:
<div class="container">
<div class="circle-div"> </div>
<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="40px" height="40px" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#026890" d="M35.686,13.595c-0.172-1.381-0.541-2.705-1.085-3.979
c-0.517-1.208-1.19-2.327-1.995-3.37c-0.758-0.982-1.629-1.855-2.593-2.629c-1.124-0.901-2.359-1.633-3.688-2.197
c-1.44-0.613-2.941-1.011-4.497-1.179c-2.306-0.252-4.575-0.041-6.787,0.672c-1.006,0.324-1.975,0.741-2.896,1.261
c-1.782,1.007-3.32,2.295-4.606,3.889C6.355,7.53,5.472,9.165,4.893,10.956c-0.397,1.23-0.63,2.498-0.694,3.793
c-0.057,1.153-0.017,2.301,0.175,3.438c0.158,0.944,0.415,1.866,0.749,2.767c0.369,0.994,0.842,1.938,1.434,2.815
c0.666,0.986,1.373,1.944,2.053,2.921c1.443,2.076,10.465,12.023,11.379,13.173c1.063-1.314,10.533-11.896,13.064-15.517
c0.96-1.372,1.713-2.839,2.175-4.453c0.242-0.849,0.427-1.708,0.52-2.586C35.875,16.068,35.84,14.832,35.686,13.595z M20,28.318
c-7.041,0-12.75-5.709-12.75-12.751S12.958,2.817,20,2.817c7.042,0,12.75,5.708,12.75,12.75S27.042,28.318,20,28.318z"/>
</svg>
</div>
CSS:
.container {
position: relative;
}
.circle-div {
border-radius: 50%;
background-image: url('http://pic.1fotonin.com/data/wallpapers/1/WDF_499177.jpg');
width: 25px;
height: 25px;
background-size: cover;
background-position: 25% 25%;
position: absolute;
left: 7.5px;
top: 2.5px;
}
2) SVG clipPath - place an SVG image on top the SVG path and clip it with a circle.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40">
<defs>
<clipPath patternUnits="userSpaceOnUse" id="clip">
<circle cx="50%" cy="40%" r="13" ></circle>
</clipPath>
</defs>
<image preserveAspectRatio="xMidYMid slice" clip-path="url(#clip)" x="5" y="2" width="100%" height="65%" xlink:href="http://pic.1fotonin.com/data/wallpapers/1/WDF_499177.jpg"></image>
<path stroke-width="1px" stroke="#026890" fill-rule="evenodd" clip-rule="evenodd" fill="#026890" d="M35.686,13.595c-0.172-1.381-0.541-2.705-1.085-3.979
c-0.517-1.208-1.19-2.327-1.995-3.37c-0.758-0.982-1.629-1.855-2.593-2.629c-1.124-0.901-2.359-1.633-3.688-2.197
c-1.44-0.613-2.941-1.011-4.497-1.179c-2.306-0.252-4.575-0.041-6.787,0.672c-1.006,0.324-1.975,0.741-2.896,1.261
c-1.782,1.007-3.32,2.295-4.606,3.889C6.355,7.53,5.472,9.165,4.893,10.956c-0.397,1.23-0.63,2.498-0.694,3.793
c-0.057,1.153-0.017,2.301,0.175,3.438c0.158,0.944,0.415,1.866,0.749,2.767c0.369,0.994,0.842,1.938,1.434,2.815
c0.666,0.986,1.373,1.944,2.053,2.921c1.443,2.076,10.465,12.023,11.379,13.173c1.063-1.314,10.533-11.896,13.064-15.517
c0.96-1.372,1.713-2.839,2.175-4.453c0.242-0.849,0.427-1.708,0.52-2.586C35.875,16.068,35.84,14.832,35.686,13.595z M20,28.318
c-7.041,0-12.75-5.709-12.75-12.751S12.958,2.817,20,2.817c7.042,0,12.75,5.708,12.75,12.75S27.042,28.318,20,28.318z"/>
</svg>
3) SVG pattern - place an SVG circle on top the SVG path and fill it with a pattern that is the image itself.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40">
<defs>
<pattern id="pf" x="0" y="0" height="100%" width="100%"
viewBox="0 0 960 420" preserveAspectRatio="xMinYMid slice">
<image x="-150" y="11" width="960" height="420" xlink:href="http://pic.1fotonin.com/data/wallpapers/1/WDF_499177.jpg" ></image>
</pattern>
</defs>
<circle cx="50%" cy="40%" r="13" fill="url(#pf)"></circle>
<path stroke-width="1px" stroke="#026890" fill-rule="evenodd" clip-rule="evenodd" fill="#026890" d="M35.686,13.595c-0.172-1.381-0.541-2.705-1.085-3.979
c-0.517-1.208-1.19-2.327-1.995-3.37c-0.758-0.982-1.629-1.855-2.593-2.629c-1.124-0.901-2.359-1.633-3.688-2.197
c-1.44-0.613-2.941-1.011-4.497-1.179c-2.306-0.252-4.575-0.041-6.787,0.672c-1.006,0.324-1.975,0.741-2.896,1.261
c-1.782,1.007-3.32,2.295-4.606,3.889C6.355,7.53,5.472,9.165,4.893,10.956c-0.397,1.23-0.63,2.498-0.694,3.793
c-0.057,1.153-0.017,2.301,0.175,3.438c0.158,0.944,0.415,1.866,0.749,2.767c0.369,0.994,0.842,1.938,1.434,2.815
c0.666,0.986,1.373,1.944,2.053,2.921c1.443,2.076,10.465,12.023,11.379,13.173c1.063-1.314,10.533-11.896,13.064-15.517
c0.96-1.372,1.713-2.839,2.175-4.453c0.242-0.849,0.427-1.708,0.52-2.586C35.875,16.068,35.84,14.832,35.686,13.595z M20,28.318
c-7.041,0-12.75-5.709-12.75-12.751S12.958,2.817,20,2.817c7.042,0,12.75,5.708,12.75,12.75S27.042,28.318,20,28.318z"/>
</svg>
I think the easiest solution in this case is to go with CSS, as it requires less position-tweaking to get proper results.
demo