Background-image in rounded triangle via svg clip path - html

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>

Related

Polygon in HTML SVG is clipped

I create a star via an SVG polygon. It draws fine when the stroke width is 1, but with wider strokes, the bottom left (and only the bottom left) vertex gets cut off. Does anyone know why this happens (and how to fix it)?
The following snippets (which I displayed using https://www.w3schools.com 'try it') show the problem, both with the original star and with just the bottom 'arm' isolated as a simple triangle:
<svg height="200" width="200">
<polygon points="16,53 23,35 8,25 25,25 30,8 36,25 53,25 38,35 45,53 30,41" style="fill:none;stroke:purple;stroke-width:7" />
Sorry, your browser does not support inline SVG.
</svg>
<svg height="300" width="300">
<polygon points="120,164 64,212 92,140" style="fill:none;stroke:purple;stroke-width:9" />
Sorry, your browser does not support inline SVG.
</svg>

The default stroke-miterlimit is 4. You need a larger number than that because your star is quite pointy.
<svg height="200" width="200">
<polygon transform="translate(10, 10)" points="16,53 23,35 8,25 25,25 30,8 36,25 53,25 38,35 45,53 30,41" style="fill:none;stroke:purple;stroke-width:7; stroke-miterlimit:10" />
Sorry, your browser does not support inline SVG.
</svg>

SVG clipping path scaling

I am currently trying to get an image with an SVG clipping path to scale with the browser (image needs to be 100% of browser width). I have read in several places that applying both clipPathUnits="objectBoundingBox" and transform="scale(0.01)" is the solution, however I am unable to get this to work. Whenever I apply those, the image disappears.
No doubt something simple I'm missing?
Codepen
HTML
<img id="preview-img" width="100%" src="http://www.menucool.com/slider/prod/image-slider-4.jpg" style="clip-path: url("#clipPolygon");" class="moving">
<svg width="0" height="0" >
<clipPath id="clipPolygon" clipPathUnits="objectBoundingBox" transform="scale(0.01)">
<polygon id="poly1" points="317 343,966 254,964 -6,610 -5">
<animate id="poly1Anim" attributeName="points" dur="500ms" to="" fill="freeze" />
</polygon>
</clipPath>
</svg>
If you remove the two attributes mentioned above, the image shows, however I require the image and path to scale with the browser.

Choosing the right scale:
As clipPathUnits="userSpaceOnUse" uses the size of the original path (in absolute pixels) and clipPathUnits="objectBoundingBox" uses 0 to 1 as the coordinate system, the correct scale is
scale(1/x, 1/y)
So for a svg with coordinates meant for a 1280x800 px image, the correct scale would be:
scale(0.00078125, 0.00125)

Turns out the solution was the simple case of adjusting the scale from 0.01 to 0.001!
Updated working codepen
<img id="preview-img" width="100%" src="http://www.menucool.com/slider/prod/image-slider-4.jpg" style="clip-path: url("#clipPolygon");" class="moving">
<svg width="0" height="0" >
<clipPath id="clipPolygon" clipPathUnits="objectBoundingBox" transform="scale(0.001)">
<polygon id="poly1" points="317 543,966 254,964 -6,610 -5">
<animate id="poly1Anim" attributeName="points" dur="500ms" to="" fill="freeze" />
</polygon>
</clipPath>
</svg>

svg not sharp, but blurry

For whatever reason these svg files, seems blurry, and not 100% sharp in all browsers. These are svg files, and are enclosed within elements that are scaled to pixels, in other words using px and not % - hence no browser bitmap errors.
Any idea as to why this is happening?
This is one of the svg files;
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, 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 361.5 192.5" style="enable-background:new 0 0 361.5 192.5;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
.st1{fill:#FC5500;}
.st2{fill:#FFFFFF;}
.st3{fill:#FB5500;}
</style>
<g>
<path class="st0" d="M-9.4-6.3c126,0,252,0,378,0c0,68.7,0,137.3,0,206c-126,0-252,0-378,0C-9.4,131-9.4,62.4-9.4-6.3z"/>
<path class="st1" d="M-0.2,112.1c0-8,0-15.9,0-24.4c112.3,0,224.3,0,336.7,0c0-29.4,0-58.4,0-87.7c8.4,0,16.4,0,25,0
c0,46.8,0,93.7,0,140.6c-2.4-0.3-2.5-2.5-3.2-4c-3.7-9-10.3-15-19.3-18.5c-15.2-6-31.2-6.7-47.2-5.5c-7.8,0.6-15.6,1.5-23.1,4.1
c-24.8,8.7-33.9,38-18.3,59.2c5.8,7.8,14.5,10.9,23.4,13.4c2,0.6,4.9-0.1,5.6,3.1c-13.9,0-27.9,0-41.8,0
c-8.1-5.7-14.1-13.6-21.4-20.2c-1.7-1.5-3.8-2.8-4.1-5.5c0.5-2.5,2.8-3.1,4.7-3.9c9.5-4.3,14.3-11.9,14.5-22.1
c0.2-10.1-4.8-17.3-13.9-21.8c-8.5-4.2-17.6-5.3-26.7-5.5c-20.8-0.4-41.6-0.1-62.5-0.1c-1.7,0-3.3,0-4.8,0.8
c-1.6,2.3-1.1,4.9-1.1,7.3c0,21.2,0,42.3,0,63.5c0,2.6,0.5,5.4-1.7,7.6c-32,0-64,0-96.1,0c-3.2-6.9-1.5-13.8-0.9-20.2
c3.1-2.6,6-2.3,8.8-2.3c12.7-0.1,25.3,0,38-0.1c7.8-0.1,15.3-1.6,22.2-5.3c17.8-9.6,18.8-33.3,1.7-44.3c-8.9-5.7-19.1-6.7-29.3-6.9
c-19.3-0.3-38.7,0.1-58-0.1C4.6,113.4,2,113.8-0.2,112.1z"/>
<path class="st2" d="M120.6,192.5c0-26.6,0-53.3,0-80.7c29.5,1.5,58.7-2.6,87.6,2.2c13.5,2.2,24.2,9.5,24.9,25.1
c0.6,14.2-6.8,23.1-20.2,27c8.3,8.8,16.5,17.6,24.7,26.4c-11.2,0-22.5,0-33.7,0c-4-1.4-6-5-8.7-7.9c-12.1-13.2-6.6-11-23.7-11.2
c-5.5-0.1-10.9,0-16.4,0c-2,0-4-0.2-6,1c-1.5,3.5-0.5,7.4-0.8,11.1c-0.2,2.4,0.3,5-1.7,7.1C138,192.5,129.3,192.5,120.6,192.5z"/>
<path class="st2" d="M203.8,0.7c-4.9,6.4-10,13.1-15.2,20c-18.4,0-36.7,0-55,0c-4.1,0-9-0.2-8.9,5.9c0,6.1,4.8,5.9,9,6
c16.8,0.2,33.7-0.4,50.5,0.6c12.5,0.7,22.4,6.1,22.6,20.9c0.2,14.6-7.3,24.7-22.5,25.3c-28.5,1.2-57.1,0.3-85.9,0.3
c5-6.5,10.1-13.2,15.3-20c19.3,0,38.4,0.1,57.6-0.1c4.4,0,11.3,1.9,11.3-5.3c0.1-7.7-7-5.4-11.6-5.5c-16.1-0.4-32.4,0.3-48.4-0.9
c-13-1-21.7-8.1-21.9-22.5c-0.2-14.9,8.5-23.6,22-24.3C149.5-0.2,176.6,0.7,203.8,0.7z"/>
<path class="st2" d="M279.5,192.5c-31.5-9.3-41.2-22.1-36.9-48.9c2.8-17.6,15-26,31-29.7c18.9-4.4,38-4.4,57-0.2
c15.1,3.4,26.5,11.3,31,27c0,7.6,0,15.2,0,22.9c-2.8,16.5-15.6,27.1-34.6,28.6c-1,0.1-2-0.2-2.9,0.3
C309.1,192.5,294.3,192.5,279.5,192.5z"/>
<path class="st2" d="M77.2,20.7c-17.1,0-33.9,0-51.1,0c0,3.2,0,6.3,0,9.8c20.5,0,41.1,0,62.9,0c-5.3,6.7-9.8,12.4-14.4,18.2
c-16.2,0-32.1,0-48.5,0c0,3.6,0,7,0,10.8c22,0,44.1,0,67.6,0c-5.9,7.7-11,14.5-16,21.1c-26,0-51.6,0-77.6,0C0,53.7,0,27,0,0
c30.7,0,61.4,0,93,0C87.6,7.1,82.5,13.8,77.2,20.7z"/>
<path class="st2" d="M-0.2,112.1c25.3,0.1,50.6-0.4,75.9,0.7c20.2,0.9,32.8,13.2,32.7,29.5c-0.1,16.5-13.5,28.5-34.1,29.3
c-16.3,0.6-32.6,0.1-49.7,0.1c0,7.4,0,14.1,0,20.9c-8.1,0-16.3,0-24.8,0C-0.2,165.6-0.2,138.8-0.2,112.1z"/>
<path class="st2" d="M233.3-0.2c18.6,0,37-0.5,55.3,0.1c21,0.7,34.6,13.1,34.6,30.5c0,17.4-13.8,29.5-35.4,30.1
c-15.1,0.5-30.3,0.1-45.9,0.1c0,6.7,0,13.1,0,19.8c-8.6,0-16.6,0-25,0c0-13.4,0-26.6,0-40.7c22.6,0,45.3,0,68.1,0
c5.2,0,10.8-0.6,12.4-6.2c2.6-9.1-3-12.6-11.1-12.7c-22.7-0.2-45.5-0.1-69.4-0.1C222.7,13.3,227.9,6.6,233.3-0.2z"/>
<path class="st1" d="M146.7,192.5c0-6.8,0-13.6,0-20.8c13.2,0,26.1,0,39.7,0c5.6,6.6,11.6,13.7,17.6,20.8
C184.9,192.5,165.8,192.5,146.7,192.5z"/>
<path class="st3" d="M323.9,192.5c17.1-3.7,32.3-9.9,37.6-29c0,9.5,0,18.9,0,29C349,192.5,336.4,192.5,323.9,192.5z"/>
<path class="st3" d="M145.8,150.8c0-5.7,0-11.4,0-17.1c17.9,0,35.6-0.2,53.3,0.2c4.4,0.1,7.8,3.1,7.7,8.3c-0.1,6-4.5,8.4-9.3,8.5
C180.4,151,163.3,150.8,145.8,150.8z"/>
<path class="st1" d="M302.2,173.1c-6-0.4-11.4-0.7-16.9-1.1c-12.8-1.1-18.4-8-18.1-20.9c0.3-12.7,7.6-17.4,19-18.6
c11.1-1.1,22.3-1.2,33.4,0.1c11.3,1.3,17.2,7.1,17.3,19c0.1,11.8-5,18.7-16.7,20C314.1,172.4,307.9,172.7,302.2,173.1z"/>
<path class="st3" d="M25.1,133c15.6,0,30.9-0.2,46.2,0.1c5.6,0.1,11.1,1.8,11.2,8.7c0.2,7.1-5.2,9.3-11.1,9.4
c-15.3,0.3-30.6,0.1-46.3,0.1C25.1,145.5,25.1,139.6,25.1,133z"/>
</g>
</svg>

If you want your SVG to be at its sharpest, then design it so that its shapes - especially the horizontal and vertical parts of the shapes - are on pixel boundaries.
For example, compare the following two examples:
<svg width="50" height="50">
<rect x="9.5" y="9.5" width="31" height="31"/>
</svg>
<svg width="50" height="50">
<rect x="10" y="10" width="30" height="30"/>
</svg>
Here's what this looks like at 4X enlargement.
Any time your shape passes through the middle of pixels, you will get grey pixels due to the anti-aliasing that 2D renderers use.

The response used a slightly modified code #Paul LeBeau
You can use the SVG attribute - shape-rendering =" crispEdges " to disable browser anti-aliasing.
https://developer.mozilla.org/ru/docs/Web/SVG/Attribute/shape-rendering
crispEdges
Indicates that the user agent shall attempt to emphasize the contrast
between clean edges of artwork over rendering speed and geometric
precision. To achieve crisp edges, the user agent might turn off
anti-aliasing for all lines and curves or possibly just for straight
lines which are close to vertical or horizontal. Also, the user agent
might adjust line positions and line widths to align edges with device
pixels.
<svg width="50" height="50">
<rect x="9.5" y="9.5" width="31" height="31" shape-rendering="crispEdges"/>
</svg>
<svg width="50" height="50">
<rect x="10" y="10" width="30" height="30"/>
</svg>
The image is increased 4 times
No gray pixels are observed.
Update 2019 by comments
There is no universal, 100% solution to the pixelation problem.
Since the rendering depends on the installed operating system, its settings, the video card and which browser is used.
You can use an integrated approach made up of all the answers of this topic:
Use integer svg image coordinate values by answer #Paul LeBeau
If you take a finished image with fractional values, you can process
it with SVG optimizer
Set the integer value of viewBox by answer #AKX
Use the attribute shape-rendering ="crispEdges"
If a design change is possible, avoid contrasting border colors.
For example, use a dark gray color instead of a black and white combination or use shades of gray instead of a pure white background.

I tried the SVG on a page and it doesn't look really blurry to me.
However, you could try editing the viewbox to have an integer size -- i.e. turn viewBox="0 0 361.5 192.5" into viewBox="0 0 362 193" -- that might make a difference.

it might be caused by use of borders and shadows in creation of the svg.
I avoid those myself as they are sometimes blurry.
Shadow if needed can be created as another path with transparency and offset.

Svg how to make responsive a path?

I'm using scrollmagic to create a 5000px scroll page that show me a svg during scrolling. Something like the scrollmagic example:
http://scrollmagic.io/examples/advanced/svg_drawing.html
But in vertical direction.
I have create an example svg a simple line:
<div id="svgPathContainer">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200px" height="5000px">
<path id="word" style="stroke-linecap: round; stroke-linejoin: round;"
fill="none" stroke="#000000" stroke-width="5"
d="M100.5,114.278c47.888,7.285,137.984,143.083,159.855,190.144
c30.89,66.468,10.254,111.869-37.772,152.906c-31.931,27.285-74.983,57.824-77.6,102.502
c-5.162,88.125,112.785,84.949,162.564,139.414c53.236,58.247,60.765,130.01,63.938,207.828
c4.147,101.679-29.448,146.444-104.211,209.857c-64.798,54.961-92.906,92.587-105.645,179.853
c-13.169,90.21,18.128,126.772,68.961,196.205c67.288,91.907,142.5,150.947,142.131,270.976
c-0.105,34.208,11.839,102.08-1.166,133.365c-10.983,26.423-67.391,53.781-93.12,73.762
c-72.74,56.487-150.915,119.124-177.245,214.908c-35.789,130.196,52.601,235.276,115.293,340.718
c40.142,67.514,80.142,136.714,121.243,203.728c24.011,39.147,25.978,64.328,23.883,111.723
c-3.379,76.453-25.588,148.162-69.406,210.981c-47.29,67.796-97.792,91.573-129.774,171.146
c-35.857,89.216-75.371,181.193-67.467,278.983c7.417,91.774,54.697,134.536,123.617,187.276
c52.593,40.247,70.239,78.729,98.745,139.482c17.03,36.297,50.864,102.872,32.315,143.921
c-18.371,40.654-99.974,70.074-133.71,95.443c-54.011,40.613-91.761,76.666-104.774,143.821
c-21.981,113.433,2.806,124.824,111,172.903c104.017,46.223,181.164,52.461,144.97,178.154
c-20.69,71.855-110.003,82.523-172.074,111.192c-26.481-39.319-116.671-107.498-68.566-157.16
c13.472-13.907,74.68-32.127,95.967-26.632c44.007,11.361,38.321,41.719,49.537,77.444c-30.281,6.589-62.791,14.078-92.874,22.222
c-0.973-11.136-3.413-27.139-0.84-38.178"/>
</svg>
</div>
I can "draw" this line from begin to end of the scroll and reverse successfully. My question is how i can make this svg responsive? I have tried :
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30%" height="5000px">
but i doesn't works... I can't embed the svg directly in an image src, because if i use an image instead the path coordinates , the drawing animation stops working. So the question is, how i can make responsive the svg path?

How to change or call svg clippath polygon attributes in CSS

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