CODEWITHSUNDEEP
htmlcsssvg
now he who must not be named.
now he who must not be named.

Reputation: 9396

How to bring an image inside SVG?

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:

  1. Chrome doesn't display the image as in the above fiddle though.

enter image description here

  1. The one in the fiddle - doesn't actually fit in to a circle. The image is in a square shape.

enter image description here

(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.

Upvotes: 0

Views: 1785

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101956

There are a couple of things wrong with your fiddle:

  1. It is <defs>, not <def>. That whole section was being ignored.
  2. 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>

Upvotes: 1

Adam
Adam

Reputation: 1383

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>

Upvotes: 0

Related Questions