I have been trying for hours to make a rectangled feather around and image. I got linked to a doc for masking and clipping. I think i might be able to use this, but i cant figure out why the rectangle mask isnt working. I post the code im trying to use underneeth, thanks for any comments in advance!
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="200">
<defs>
<filter id="filter">
<feGaussianBlur stdDeviation="5"/>
</filter>
<mask id="mask">
<rectangle x="0" y="0" height="100px" width="100px" fill="white" filter="url(#filter)"></rectangle>
</mask>
</defs>
<image class="test" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="170" height="200" mask="url(#mask)"></image>
</svg>
Just to mention, i got this to work with the ellipse tagg!
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="200">
<defs>
<filter id="filter">
<feGaussianBlur stdDeviation="5"/>
</filter>
<mask id="mask">
<ellipse cx="50%" cy="50%" rx="60" ry="100" fill="white" filter="url(#filter)"></ellipse>
</mask>
</defs>
<image class="test" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="170" height="200" mask="url(#mask)"></image>
</svg>
The tag should be rect not rectangle. <rect...></rect>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="200">
<defs>
<filter id="filter">
<feGaussianBlur stdDeviation="5"/>
</filter>
<mask id="mask">
<rect x="35" y="20" height="130px" width="100px" fill="white" filter="url(#filter)"></rect>
</mask>
</defs>
<image class="test" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="170" height="200" mask="url(#mask)"></image>
</svg>
Related
I've used this way (you could see the codepen) to display image background in my logo letters. Now, i want to display a video instead of the image.
https://codepen.io/irawachaloco/pen/GJKLzy
<svg class='crop-shapes'>
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="650">
<image class='twombly' xlink:href="http://gastv.mx/wp-content/uploads/2014/05/jumex.jpg" x="-30" y="-30"
width="380" height="267" />
</pattern>
</defs>
<circle class='circ' cx="50" cy="50" r="50" fill="url(#img1)" filter="url(#sparklin)" onmouseover="evt.target.setAttribute('opacity', '0.5');"
13
onmouseout="evt.target.setAttribute('opacity','1)');"/>
<rect x="110" y="0" width="100" height="100" stroke="black" fill="url(#img1)" filter="url(#sparklin)"/>
<polygon x="10" points="270,0 220,100 320,100" fill="url(#img1)" filter="url(#sparklin)"/>
</svg>
Any idea or example ? I'm a noob with svg practices..
Thanks a lot !
I am having a hard time applying a filter to an inline SVG symbol. I can make it work fine in a normal external SVG file but as soon as I make it inline with an HTML document, the filtered objects disappear. Is there anything I'm missing with the filter attribute? This fails for me in an up to date Chrome 57.
<html>
<body>
<svg style="display:none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="blur_inline">
<feGaussianBlur in="SourceGraphic" stdDeviation="3"/>
</filter>
<symbol id="filtered" width="80mm" height="50mm" viewBox="0 0 80 50" preserveAspectRatio="xMinYMin meet">
<rect id="a" x="0" y="10" width="30" height="20" fill="green"/>
<rect id="e" x="40" y="10" width="30" height="20" fill="blue" filter="url(#blur_inline)"/>
</symbol>
<symbol id="no_filter" width="80mm" height="50mm" viewBox="0 0 80 50" preserveAspectRatio="xMinYMin meet">
<rect id="a" x="0" y="10" width="30" height="20" fill="green"/>
<rect id="e" x="40" y="10" width="30" height="20" fill="blue"/>
</symbol>
</defs>
</svg>
<p>Symbol with a green and blurred blue box:</p>
<svg width="100mm" height="50mm">
<use xlink:href="#filtered" x="10" y="35" ></use>
</svg>
<p>Second symbol with no filter applied:</p>
<svg width="100mm" height="50mm">
<use xlink:href="#no_filter" x="10" y="35" ></use>
</svg>
</body>
</html>
Setting your SVG to display:none will make it non-functional because it disables all CSS.
<html>
<body>
<svg width="0" height="0">
<defs>
<filter id="blur_inline">
<feGaussianBlur in="SourceGraphic" stdDeviation="3"/>
</filter>
<symbol id="filtered" width="80mm" height="50mm" viewBox="0 0 80 50" preserveAspectRatio="xMinYMin meet">
<rect id="a" x="0" y="10" width="30" height="20" fill="green"/>
<rect id="e" x="40" y="10" width="30" height="20" fill="blue" filter="url(#blur_inline)"/>
</symbol>
<symbol id="no_filter" width="80mm" height="50mm" viewBox="0 0 80 50" preserveAspectRatio="xMinYMin meet">
<rect id="a" x="0" y="10" width="30" height="20" fill="green"/>
<rect id="e" x="40" y="10" width="30" height="20" fill="blue"/>
</symbol>
</defs>
</svg>
<p>Symbol with a green and blurred blue box:</p>
<svg width="100mm" height="50mm">
<use xlink:href="#filtered" x="10" y="35" ></use>
</svg>
<p>Second symbol with no filter applied:</p>
<svg width="100mm" height="50mm">
<use xlink:href="#no_filter" x="10" y="35" ></use>
</svg>
</body>
</html>
I have the following piece of code, it works in w3schools.com but won't work when running with a local server ... what am I missing ?
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50%" height="50%">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="http://www.freewebheaders.com/wordpress/wp-content/gallery/grass/natural-green-trimmed-grass-sport-field-background-header.jpg" x="0" y="0" width="100" height="100" />
</pattern>
</defs>
<path fill="url(#img1)" stroke="black" stroke-width="3"
d="M 50,50 90,90 130,50 110,10 70,10 Z" />
</svg>
I also tried to use a local image which is located on my server
I'm trying to display an image in an svg circle in the context of an html page with the following lines :
<html>
<head>
</head>
<body>
<svg width="260" height="120">
<defs>
<pattern id="Triangle"
width="10" height="10"
patternUnits="userSpaceOnUse">
<polygon points="5,0 10,10 0,10"/>
</pattern>
<pattern id=Img"
width="100" height="100"
patternUnits="userSpaceOnUse">
<image x="0" y="0"
width="100%" height="100%"
xlink:href="corruscant.jpg"></image>
</pattern>
</defs>
<circle cx="60" cy="60" r="60"
fill="url(#Img)"
stroke="red"/>
<circle cx="200" cy="60" r="60"
fill="url(#Triangle)"
stroke="red"/>
</svg>
</body>
</html>
This 'should' work according to what I read on many documentations/examples/posts such as :
Add a background image (.png) to a SVG circle shape
SVG image inside circle
http://jsfiddle.net/UI_Designer/njr4fdhq/2/
But it doesn't. Triangles appear in the second circle, so svg structure is ok I guess..
I've tried to copy/paste the jsfiddle example but the landscape does not show itself.
I'm looking for elements that my naïve approach has not taken in account.
Thanks
<svg width="260" height="120">
<defs>
<pattern id="Triangle" width="10" height="10" patternUnits="userSpaceOnUse">
<polygon points="5,0 10,10 0,10" />
</pattern>
<pattern id="Img" width="100" height="100" patternUnits="userSpaceOnUse">
<image x="0" y="0" width="100%" height="100%" xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/46/A_Meat_Stall_with_the_Holy_Family_Giving_Alms_-_Pieter_Aertsen_-_Google_Cultural_Institute.jpg"></image>
</pattern>
</defs>
<circle cx="60" cy="60" r="60" fill="url(#Img)" stroke="red" />
<circle cx="200" cy="60" r="60" fill="url(#Triangle)" stroke="red" />
</svg>
Is this possible? The following is what I tried but it completely fills the circle with black.
<svg id='vizMenu' width="700" height="660">
<defs>
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="0.5" dy="0.8" result="offsetblur"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<circle id='top' filter="url(#dropshadow)" cx="180" cy="120" r="80" stroke="#2E2E2E" stroke-width="2" fill="url('images/word-cloud.png')"/>
<circle id='bottom' filter="url(#dropshadow)" cx="500" cy="300" r="80" stroke="#2E2E2E" stroke-width="2" fill="url('images/word-cloud.png')"/>
<circle id='extra' filter="url(#dropshadow)" cx="180" cy="560" r="80" stroke="#2E2E2E" stroke-width="2" fill="#ffffff"/>
</svg>
An image fill for an svg element is achieved through SVG Patterns...
<svg width="700" height="660">
<defs>
<pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1">
<image x="0" y="0" xlink:href="url.png"></image>
</pattern>
</defs>
<circle id='top' cx="180" cy="120" r="80" fill="url(#image)"/>
</svg>
Well, I couldn't make it work with the accepted answer. This is how I ended up doing it:
<svg width="100" height="100">
<defs>
<pattern id="image" patternUnits="userSpaceOnUse" height="100" width="100">
<image x="0" y="0" height="100" width="100" xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image>
</pattern>
</defs>
<circle id='top' cx="50" cy="50" r="50" fill="url(#image)"/>
</svg>
If you want to customize the size, use this as a scale reference:
x = yourPreferredSize
<svg width=">2x" height=">2x">
<defs>
<pattern id="image" patternUnits="userSpaceOnUse" height=">2x" width=">2x">
<image x="0" y="0" height="2x" width="2x" xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image>
</pattern>
</defs>
<circle id='top' cx="x" cy="x" r="x" fill="url(#image)"/>
</svg>
(This scale works for squared images)
Image repetition problem solved with proper explanation (Thanks to AmeliaBR)
TL;DR: The concept of objectBoundingBox and preserveAspectRatio are used!
<svg height = "10%" width = "10%">
<defs>
<pattern id = "attachedImage" height = "100%" width = "100%"
patternContentUnits = "objectBoundingBox">
<image xlink:href = "url.png" preserveAspectRatio = "none"
width = "1" height = "1"/>
</pattern>
</defs>
<circle cx = "50%" cy = "50%" r = "35%" fill = "url(#attachedImage)"/>
</svg>
I know this is an old question, but I used a filter to overlay the image. The above solution didn't work for me because of scaling and it seemed like the images was tiled. I used this instead, I hope it will help others as well.
<svg width="700" height="660">
<filter id="this_image" x="0%" y="0%" width="100%" height="100%">
<feImage xlink:href="test_image.png"/>
</filter>
<circle filter="url(#this_image)" cx="180" cy="120" r="80" />
</svg>
This is my solution, the differences are that this doesn't use the patternUnits="userSpaceOnUse" and that you specify the desired width and height of the image element.
<defs>
<pattern id="{some name}" x="0" y="0" width="1" height="1">
<image href="{image url}" x="0" y="0" width="{desired width}" height="{desired height}"></image>
</pattern>
</defs>