I am using the code below to put an image in an SVG and some bunch of text directly below it:
<td>
<table>
<tr>
<td>
<svg width="200" height="250">
<defs>
<clipPath id="circleView">
<circle cx="50" cy="50" r="50" fill="#FFFFFF" />
</clipPath>
</defs>
<image width="100" height="100"
xlink:href="http://etc.usf.edu/clipart/63300/63348/63348_clock_500_md.gif" clip-path="url(#circleView)" />
<text baseline-shift="-130px" text-anchor="bottom" class="smallh2">headertext</text>
<text baseline-shift="-160px" text-anchor="bottom" class="smallh2" id="objecta"></text>
</svg>
</td>
</tr>
</table>
</td>
The first<text> shows the heading while the second one calls a html element which has a figure.
The above code works pretty well in Google Chrome but somehow doesn't show the text in IE and Edge.
Replace baseline-shift with y for text. It works in all browsers.
<svg width="200" height="250">
<defs>
<clipPath id="circleView">
<circle cx="50" cy="50" r="50" fill="#FFFFFF" />
</clipPath>
</defs>
<image width="100" height="100"
xlink:href="http://etc.usf.edu/clipart/63300/63348/63348_clock_500_md.gif" clip-path="url(#circleView)" />
<text y="130" text-anchor="bottom" class="smallh2">headertext</text>
<text baseline-shift="-160px" text-anchor="bottom" class="smallh2" id="objecta"></text>
</svg>
Related
I've edited this question because my previous one might actually reduce to this....why am I seeing nothing here when I expect to see a circle with filled with an image:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<svg width="100" height="100">
<defs>
<pattern patternUnits="userSpaceOnUse" height="100" width="100">
<image id="image-JON" x="27.3" y="27.3" height="45.3515625" width="45.3515625" xlink:href="https://keithmcnulty.github.io/game-of-thrones-network/img/jon.png">
</image>
</pattern>
</defs>
<circle cx="50" cy="50" r="20.408203125" fill="url(#image-JON)">
</circle>
</svg>
</body>
Solved, its the pattern tag that needs the ID, not the image tag:
<svg width="100" height="100">
<defs>
<pattern id="image-JON" patternUnits="userSpaceOnUse" height="100" width="100">
<image x="27.3" y="27.3" height="45.3515625" width="45.3515625" xlink:href="https://keithmcnulty.github.io/game-of-thrones-network/img/jon.png">
</image>
</pattern>
</defs>
<circle cx="50" cy="50" r="20.408203125" fill="url(#image-JON)">
</circle>
</svg>
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 !
Here's a link to my codepen: https://codepen.io/Bryandbronstein/pen/QVaQpa
So basically what I have is an svg circle set as a clipPath element to cut my image into a circle. Then I want to curve my text around the circle, rather than it being in a straight line on top of my circular image, like this:
image with curved text
The thing is, I have this image to show off as my example because this code works in Firefox, but no other browser I could test. What gives?
Here's my code:
<svg height="300" width="350">
<defs>
<clipPath id="circleView">
<circle id="curve" cx="150" cy="180" r="110" fill="transparent" />
</clipPath>
</defs>
<text x="390" y="-20" width="100">
<textpath id="homepageText" xlink:href="#curve">
My Homepage!
</textpath>
</text>
<image width="300" height="410" xlink:href="meee.jpg" clip-path="url(#circleView)" />
</svg>
Just to clarify, I have moderate experience in HTML and CSS but very little in SVG. Thank you!
Use path insted of circle, and text-anchor + startOffset to center the text:
<svg x="0px" y="0px" width="350" height="300" viewBox="0 0 350 300">
<defs>
<path id="curve" d="M40,180c0-60.751,49.248-110,110-110c60.751,0,110,49.249,110,110"/>
</defs>
<text fill="black" class="curved-text">
<textPath xlink:href="#curve" text-anchor="middle" startOffset="50%">My homepage!</textPath>
</text>
</svg>
Working Codepen.
Using svg path tag we can achieve curved text. Below is the modification to your code. Corrected x and y for text tag and have added path with id "forText.
<svg height="300" width="350">
<defs>
<clipPath id="circleView">
<circle id="curve" cx="150" cy="180" r="110" fill="transparent" />
</clipPath>
</defs>
<path id="forText" d="M32,110, C25,90, 180,-39,290,130" stroke="" fill="none"/>
<text x="0" y="35" width="100">
<textpath xlink:href="#forText">
My Homepage!
</textpath>
</text>
<image width="300" height="410" xlink:href="meee.jpg" clip-path="url(#circleView)" />
</svg>
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>
This is the code i have so far but it's not good
<svg
width="200"
height="13">
<g
id="layer1">
<text
style="font-size:13px;font-family:Arial;"
x="0"
y="13"
id="">THIS IS A TEST</text>
</g>
</svg>
i am trying to get the text to fit perfectly in the box and etc. also need to add a background color to it.
This can serve:
<svg
baseProfile="full"
width="200"
height="13">
<g id="layer1">
<rect width="100%" height="100%" fill="red" />
<text
style="font-size:13px;font-family:Arial;"
x="0"
y="13"
id="">THIS IS A TEST</text>