How to bring an image inside SVG? - html

Question

I've come up with this SVG image.
<svg width="250px" height="250px" viewBox="0 0 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<def>
</def>
<g id="i-define-a-black-ring-yellow" fill="#img10" transform="translate(20.000000, 20.000000)">
<g id="Group">
<circle id="Oval" stroke="#ff0000" stroke-width="2" cx="100" cy="100" r="100">
</circle>
<circle id="Oval" fill="#228B22" fill-rule="nonzero" cx="171" cy="31" r="16">
</circle>
<animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="0s" dur="10s" repeatDur="indefinite"/>
</g>
</g>
</svg>
Fiddle here: http://jsfiddle.net/9zkfodwp/1377/
Now, I wanted an image inside the circle. So, I tried to use a clip-path1 and the code is below: But, that image doesn't appear here.
<svg width="250px" height="250px" viewBox="0 0 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<def>
<clipPath id="myCircle">
<circle id="Oval" fill="#228B22" fill-rule="nonzero" cx="171" cy="31" r="16">
</circle>
</clipPath>
</def>
<g id="i-define-a-black-ring-yellow" fill="#img10" transform="translate(20.000000, 20.000000)">
<g id="Group">
<circle id="Oval" stroke="#ff0000" stroke-width="2" cx="100" cy="100" r="100">
</circle>
<image width="50" height="35" xlink:href="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" clip-path="url(#myCircle)" />
<animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="0s" dur="10s" repeatDur="indefinite"/>
</g>
</g>
</svg>
Fiddle here: http://jsfiddle.net/9zkfodwp/1380/
My questions are:
Chrome doesn't display the image as in the above fiddle though.
The one in the fiddle - doesn't actually fit in to a circle. The image is in a square shape.
(The book image is in rectangle shape - shouldn't be it inside the circle ? As we are filling the circle with the image ?
Any ideas on what should be done on this regard will be appreciated.

Answer 1

There are a couple of things wrong with your fiddle:
It is <defs>, not <def>. That whole section was being ignored.
Your image and the clip path circle were in different places. They didn't overlap with one another. I've updated the <image> to be centred over the clip path circle.
<svg width="250px" height="250px" viewBox="0 0 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="myCircle">
<circle id="Oval" cx="171" cy="31" r="16"/>
</clipPath>
</defs>
<g id="i-define-a-black-ring-yellow" fill="#img10" transform="translate(20.000000, 20.000000)">
<g id="Group">
<circle id="Oval" stroke="#ff0000" stroke-width="2" cx="100" cy="100" r="100"/>
<image x="146" y="14" width="50" height="35"
xlink:href="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg"
clip-path="url(#myCircle)" />
<animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="0s" dur="10s" repeatDur="indefinite"/>
</g>
</g>
</svg>

Answer 2

Is this what you're tying to do.
you need to flip the image on the x-y axis, you can do that by adding scale it and add transformation.
check this code:
<svg width="350px" height="350px" viewBox="0 0 350 350" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<def>
<clipPath id="myCircle">
<circle id="Oval" fill="#228B22" fill-rule="nonzero" cx="171" cy="31" r="16">
</circle>
</clipPath>
</def>
<g id="i-define-a-black-ring-yellow" fill="#img10" transform="translate(20.000000, 20.000000)">
<g id="Group" >
<circle id="Oval" stroke="#ff0000" stroke-width="2" cx="100" cy="100" r="100">
</circle>
<image width="50" height="35" xlink:href="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" clip-path="url(#myCircle)" transform="scale (-1, 1) translate(-60, 45)" />
<animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="0s" dur="10s" repeatDur="indefinite"/>
</g>
</g>
</svg>