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
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 have code
<svg class="circle-chart in-view" version="1.1" viewBox="0 0 33.83098862 33.83098862" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle class="circle-chart-background" stroke="#efefef" stroke-width="2" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431"></circle>
<defs>
<pattern id="image2" patternUnits="userSpaceOnUse" height="100" width="100">
<image xlink:href="/hoangnguyenwp/wp-content/themes/hoangnguyenwp/images/web-shop.png" x="50%" y="50%" height="32" width="32" transform="translate(-35.5,-31)"></image>
</pattern>
</defs>
<circle class="circle-chart-circle circle-shop" stroke="#E91E63" stroke-width="2" stroke-linecap="round" fill="url(#image2)" cx="16.91549431" cy="16.91549431" r="15.91549431"></circle>
</svg>
with image inside circle
<defs>
<pattern id="image2" patternUnits="userSpaceOnUse" height="100" width="100">
<image xlink:href="/hoangnguyenwp/wp-content/themes/hoangnguyenwp/images/web-shop.png" x="50%" y="50%" height="32" width="32" transform="translate(-35.5,-31)"></image>
</pattern>
</defs>
but on mobile it's not show image
What's wrong with my code ?
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'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>
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>