I need to create an image in a rounded triangle with blurred box shadow.
I try to do this with a clip path from an svg. I found some help in this old thread but i can't manage to change the radius of the corners. Is there any easy way to solve this? I tried to replicate it with Inkscape but without any succes so far.
Example I need to make: Link to example screenshot
What i have so far:
.image-shape {display:block;width:300px;height:300px;background-position:center;clip-path:url(#clip);-webkit-clip-path:url(#clip);}
<svg height="0" width="0" class="svg-clip" style="position:absolute">
<defs>
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<path d="M1,.21 Q1,0 .81,.09L.187,.4 Q0,.5 .187,.59L.81,.90 Q1,1 1,.79Z" />
</clipPath>
</defs>
</svg>
<div class="image-shape" style="background-image:url(https://images.freeimages.com/images/large-previews/1c1/links-1242361.jpg)"></div>
Here is my relevant HML with SVG:
<div style="width:24px;height:24px;margin:0px;padding:0px;background:black;">
<svg viewBox="0 0 24 24">
<path fill="red" d="M24 12l-9-9v7h-15v4h15v7z"/>
</svg>
</div>
It renders fine but leaves padding above and below the arrow inside the div.
I tried using SVG as background to the div after base64 encoding the SVG tag, as in:
<div style="width:24px; height:24px;margin:0px;padding:0px;background-image:url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJyZWQiIHRyYW5zZm9ybT0ic2NhbGUoMSwxKSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjQgMTJsLTktOXY3aC0xNXY0aDE1djd6Ii8+PC9zdmc+');">
</div>
It displays nothing!
Yes there are similar questions asked but this is NOT a duplicate. Nothing in the answers posted to similar questions on SO resolve this problem.
I'm not very sure I understand your question. Maybe this is what you need:
I've changed the viewBox to viewBox="0 3 24 18". In order to get this value I've console.log(thePath.getBBox())
The method getBBox() returns an object with the position and the size of the bounding box of the path. I'm using this values for the new viewBox
viewBox = bb.x bb.y bb.width bb.height
Where bb is the bounding box.
<div style="width:24px;height:18px;margin:0px;padding:0px;background:black;">
<svg viewBox="0 3 24 18">
<path id="thePath" fill="red" d="M24 12l-9-9v7h-15v4h15v7z"/>
</svg>
</div>
The fill needs to be on the path instead of the svg element.
Also, try adding the width="24" and height="24" to the svg element.
Here is my relevant HML with SVG:
<div style="width:24px;height:24px;margin:0px;padding:0px;background:black;">
<svg viewBox="0 0 24 24">
<path fill="red" d="M24 12l-9-9v7h-15v4h15v7z"/>
</svg>
</div>
It renders fine but leaves padding above and below the arrow inside the div.
I tried using SVG as background to the div after base64 encoding the SVG tag, as in:
<div style="width:24px; height:24px;margin:0px;padding:0px;background-image:url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJyZWQiIHRyYW5zZm9ybT0ic2NhbGUoMSwxKSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjQgMTJsLTktOXY3aC0xNXY0aDE1djd6Ii8+PC9zdmc+');">
</div>
It displays nothing!
Yes there are similar questions asked but this is NOT a duplicate. Nothing in the answers posted to similar questions on SO resolve this problem.
I'm not very sure I understand your question. Maybe this is what you need:
I've changed the viewBox to viewBox="0 3 24 18". In order to get this value I've console.log(thePath.getBBox())
The method getBBox() returns an object with the position and the size of the bounding box of the path. I'm using this values for the new viewBox
viewBox = bb.x bb.y bb.width bb.height
Where bb is the bounding box.
<div style="width:24px;height:18px;margin:0px;padding:0px;background:black;">
<svg viewBox="0 3 24 18">
<path id="thePath" fill="red" d="M24 12l-9-9v7h-15v4h15v7z"/>
</svg>
</div>
The fill needs to be on the path instead of the svg element.
Also, try adding the width="24" and height="24" to the svg element.
So I'm building a website and I can't get the svg icon to show up correctly on my MacBook's Touch Bar when I add the site to my favourites list.
The webpage in question can be found here: http://japesfawcett.com
I have an SVG file that is a black thunderbolt on a white background, and I am using the following code for the Touch Bar icon:
<link rel="mask-icon" href="img/favicon.svg" color="#000000">
The code of the SVG is as follows:
<svg 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 16 16" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
.st0{fill:#231F20;}
</style>
<path class="st0" d="M41.3,45.9c2.4,1.6,4.6,0.3,7.4,0.1c-1.7,3.4-3.3,6.5-4.8,9.6c-0.6,1.3-0.9,2.8-1.5,4.1 c-0.6,1.3-1.4,2.5-1.9,3.8c-2.2,5.2-4,10.6-6.6,15.5c-2,3.7-2.7,7.6-4.4,11.6c0.9,0.5,1.8,0.9,2.9,1.4c4.6-6.2,9.2-12.3,13.7-18.5 c4.8-6.4,8.3-13.5,11.9-20.6c1.6-3.2,4.1-6.1,6.4-8.9c2.6-3.2,5.4-6.1,6.2-10.3c-4-2.7-8.7-1.7-13.3-2c2.2-6.7,4.2-13.1,6.3-19.6 c0.5-1.4,1-2.8-0.6-4.1c-4.4,1.1-6.1,5-8.1,8.4c-2.7,4.6-5,9.4-7.5,14.1c-1,1.8-2.1,3.4-3.1,5.2C42.5,38.7,41.3,42,41.3,45.9z"/>
</svg>
For some reason the Touch Bar icon for the site is appearing all white with no image visible in it. I can't get the SVG to be visible at all!
If anyone has any insights as to how to fix this it'd be greatly appreciated, it's been driving me mad!
It seems like that the problem lies in your SVG, which is incorrectly cropped (it's outside the 16x16 pixel bounds defined by the viewBox). Replace the path in it with the following:
<path class="st0" d="M2.29683698,7.21904762 C2.76399027,7.52380952 3.19221411,7.27619048 3.73722628,7.23809524 C3.40632603,7.88571429 3.09489051,8.47619048 2.80291971,9.06666667 C2.68613139,9.31428571 2.62773723,9.6 2.51094891,9.84761905 C2.39416058,10.0952381 2.23844282,10.3238095 2.14111922,10.5714286 C1.71289538,11.5619048 1.36253041,12.5904762 0.856447689,13.5238095 C0.467153285,14.2285714 0.330900243,14.9714286 0,15.7333333 C0.175182482,15.8285714 0.350364964,15.9047619 0.564476886,16 C1.45985401,14.8190476 2.35523114,13.6571429 3.23114355,12.4761905 C4.16545012,11.2571429 4.84671533,9.9047619 5.54744526,8.55238095 C5.85888078,7.94285714 6.34549878,7.39047619 6.79318735,6.85714286 C7.29927007,6.24761905 7.84428224,5.6952381 8,4.8952381 C7.22141119,4.38095238 6.30656934,4.57142857 5.41119221,4.51428571 C5.83941606,3.23809524 6.22871046,2.01904762 6.63746959,0.780952381 C6.73479319,0.514285714 6.83211679,0.247619048 6.52068127,0 C5.66423358,0.20952381 5.33333333,0.952380952 4.94403893,1.6 C4.41849148,2.47619048 3.97080292,3.39047619 3.48418491,4.28571429 C3.28953771,4.62857143 3.07542579,4.93333333 2.88077859,5.27619048 C2.53041363,5.84761905 2.29683698,6.47619048 2.29683698,7.21904762 Z"></path>
Also, the icon should be completely black, so you should change the fill property of the st0 class:
.st0{fill:#000;}
Recently I exported a map document from the ESRI ArcMap 10.2.2 to SVG.
I would like to animate this map with css and javascript however the "clippath" polygons that arcmap creates makes it impossible to do so. How would can I get the group "Puerto Rico" to highlight over mouseover.
This is a summary of the code:
<svg width="1008pt" height="612pt" viewBox="0 0 1008 612" enable-background="new 0 0 1008 612" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Puerto_Rico_and_Virgin_Islands">
<g id="state" class="test">
<g id="Puerto_Rico">
<clipPath id="SVG_CP_1">
<path d= coordinates are put in here />
</clipPath>
</g>
</g>
The CSS
<style type="text/css">
.test{
fill: grey;
stroke:#fff;
stroke-width:0.75;
stroke-opacity:1;
fill: orange;
}
#state:hover {
fill: red !important;
</style>
The real code:
visit jsfiddle for the entire code http://jsfiddle.net/jwitcoski/arv4g21f/3/
Using the wikipedia svg map that does not use clippath I was able to get everything to work. http://jsfiddle.net/jwitcoski/y3yhgjjy/9/
The clipPath issue is a red herring. It has nothing to do with why your CSS isn't working.
The reason your sample fiddle wasn't working was for two reasons:
Your CSS was missing a closing '}'. But I am guessing this was just a typo introduced in your fiddle.
The main reason was that your path definition for PR had a presentation attribute for fill.
<path fill="none" ... />
This presentation attribute has a higher priority than the CSS rule because it is more specific and thus over-rides it. If you remove the fill="none", everything works.
Demo fiddle here