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 ?
Related
I'm quite new to using SVG icons and I can't seem to figure out why my icon is blurry. Could you help? Thanks
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<mask id="mask0_12_275" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="12">
<rect width="12" height="12" fill="url(#pattern0)"/>
</mask>
<g mask="url(#mask0_12_275)">
<rect x="-5" y="-7" width="23" height="21" fill="#C6C6C6"/>
<rect x="-5" y="-7" width="23" height="21" fill="black" fill-opacity="0.2"/>
<rect x="-5" y="-7" width="23" height="21" fill="black" fill-opacity="0.2"/>
</g>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_12_275" transform="scale(0.01)"/>
</pattern>
<image id="image0_12_275" width="100" height="100" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR0QA/wD/AP+gvaeTAAAD4ElEQVR4nO3dy2tcVRwH8M+Mj9iSNI31gfisVEVLU1QEQS2C26JiN75wIxIEBVFEFy66K4ob3bjxfxB0o7gQXPlCpZhidyrik7aKqRpbGxfniul0xrl35s7MuZPfB36bm5nMOeebOzf3d+8khBBCCCGEEEIIIYQQQgghhBBCCKGqGTyJD7CCtaihaqVYyydwboUcwKX4PINJTGt9VqxxKTMRxljqU132lHaXQJawu8v2UK8b8Vjnxm6BPDT6sYTCw50bWl0e9BtmRz+WIB3o59Zv6BbI2njGEgqnZdDtLStMUASSmQgkMxFIZiKQzEQgmYlAMnN2zd/vBJalPs0yvsO3OIY/iq+v4BR+LZ4zL/1gzOIcbMICLpMacDfgJuwsvj5N4yqlapPsFN7EAzrOOms2hwfxVvGaTR1XZ/VV5Zst445aplXNHhxq4LhGGsghbK1tKtUt4MsGjWvkgdxd4yQGda/mjGvkgWypcwYDmteccZUKZJhub7fnTkLneHMdVy/R7c1ZBJKZCCQzdZ+pT0Iux4xaxB6SmQgkMxFIZqoeQ/7GO3h9yNedwRVS1/SCdbWtqFmpabe5eOxW6S6/ztuT5pw5hzX80rHtd6wW21dxXOruruBIR/2M7/GV1Ake1F14FPfhvLJPKntieByv4RWpbV3GWbgai9iF63BlUZf0eO3c/ISv8Q0O46DUuDwstezLOF+6wfopqc/Vqe86rD+tX8VLuLDEC89jL17Gh1KIVVvRTalV6YbpV7Gvwvrsl/a6gXpZ7+H6Po/djufxEU7WMNGm1ilp79lfYs124N11z+3rBJ7Ve1fahMelvWDSC5FrHcTTel8Ya+EZJd/27uyxfQEv4McMJtyUOoYDuLjiWv+vFh6RDnCTnmBTawXPSb/oDOUqvJ/BhKalPsa1lRJY51b8kMEkpq2OSucoldyDPzMY/LTWX7i/bBi3iE/djiuUvnvK5eLgPc46Kp3L9fRGBoPcaPV2rzD2ZjC4jVr7ugXySQYD26j1haIz8u/1kNtwc7eUwljsxO38F8jS5MYSCkuk3aQlXZDp1W8J43EEF7WlC0gRxuRtw662dAt9yMOetiGaXaF217SlK1ghDzva+py6h7Ha3pYuvoc8bGlL9z6FPGxuSRfap+Gm62lQ9l6vEEII4QwtqR8fMhGfD8lMBJKZCCQzEUhmIpDMRCCZiUAyE4FkJgLJ0KB3252UPq61KC5ykdZgUVqTYT4AO/ATD4x8is31ogkEEv8WqbfdJhBIvE31VuVvLp5Ww3R7m/CnMSZpoHWN37IyE4FkJgLJTASSmQgkMxFIZiKQzPwDFB6i1e0VaQEAAAAASUVORK5CYII="/>
</defs>
</svg>
Is it possible to round a rectangle in SVG while ensuring the stroke obeys the roundedness of corners? The code below isn't working.
No Stroke:
stroke-width="0px"
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" stroke="red" stroke-width="0px" rx="10px" ry="10px" stroke-linejoin="round" />
</svg>
With Stroke:
stroke-width="10px"
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" stroke="red" stroke-width="10px" rx="10px" ry="10px" stroke-linejoin="round" />
</svg>
The stroke seems to follow the original sharp corners instead of the rounded corners.
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" stroke="red" stroke-width="10px" rx="10px" ry="10px" stroke-linejoin="round" />
</svg>
A wide string extends beyond the svg border of the canvas SVG. Therefore, the string is partially cropped.
You must reduce the size of the rectangle so that the line is visible and shift the upper left corner of the rectangle right and down x="5" and y="5"
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="90" height="90" stroke="red" stroke-width="10px" rx="10px" ry="10px" stroke-linejoin="round" />
</svg>
Update
ViewBox added. The coordinates of the rectangle x andy of the are increased, SVG wrapped in a container and can be embedded in an HTML page as a separate block. Adaptive application
.container {
width:30%;
height:30%
}
<div class="container">
<svg viewBox="0 0 110 110" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="90" height="90" stroke="red" stroke-width="10px" rx="10px" ry="10px" stroke-linejoin="round" />
</svg>
</div>
As you can see from the picture, a square with a wide stroke is completely inside the SVG canvas
The first trivial solution is to make the overflow visible and add some margin to rectify this
svg {
overflow:visible;
margin:5px; /*half the stroke*/
}
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" stroke="red" stroke-width="10px" rx="10px" ry="10px" stroke-linejoin="round" />
</svg>
<svg width="150" height="80" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" stroke="red" stroke-width="10px" rx="10px" ry="10px" stroke-linejoin="round" />
</svg>
<svg width="100" height="200" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" stroke="red" stroke-width="10px" rx="10px" ry="10px" stroke-linejoin="round" />
</svg>
Or you use calc() like below:
svg rect{
height:calc(100% - 10px);
width:calc(100% - 10px);
x:5px;
y:5px;
}
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" stroke="red" stroke-width="10px" rx="10px" ry="10px" stroke-linejoin="round" />
</svg>
<svg width="150" height="80" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" stroke="red" stroke-width="10px" rx="10px" ry="10px" stroke-linejoin="round" />
</svg>
<svg width="100" height="200" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" stroke="red" stroke-width="10px" rx="10px" ry="10px" stroke-linejoin="round" />
</svg>
That can be used as background too:
.box {
background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" ><rect x="5" y="5" width="100%" height="100%" style="height:calc(100% - 10px);width:calc(100% - 10px)" stroke="red" stroke-width="10" rx="10" ry="10" stroke-linejoin="round" /></svg>');
color: #fff;
padding:25px;
display:inline-block;
margin: 75px 0;
}
<div class="box"> Some text here</div>
<div class="box"> text very loooooooooooong here</div>
<div class="box"> a text <br> two line here</div>
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
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>