0

In my project i am using one <image> inside <svg> to load image inside one circle i have referred bellow link

SVG image inside circle

its working fine and they are using .png image, but i want to give one .svg(sprite image) so when i tried bellow code the full sprite image is loading, how i will show a single image from that sprite image.

In my same project i used sprite image with <div> like this

 background: url('../../Images/slice_01.svg') 38% 16%/ 488px 79px no-repeat;

with its working fine because by using bellow portion

38% 16%/ 488px 79px no-repeat

we can show single image from that sprite but in <image> there is href is present instead of url so i tried 

.attr("href", "http://localhost:62706/Images/slice_01.svg");

like this it will load that full image but where i will give this position in <href> to show a particular image.

If there is any solution for this???

My sprite image is slice_01.svg

enter image description here

My design is

<svg id="graph" width="100%" height="400px">
<defs>
<pattern id="image" x="0%" y="0%" height="100%" width="100%"
         viewBox="0 0 512 512">
<image href="http://localhost:62706/Images/slice_01.svg" x="0%" y="0%" width="512" height="512" ></image>
</pattern>
 </defs>  
<circle id="sd" class="medium" cx="5%" cy="40%" r="5%" fill="url(#image)"   stroke="lightblue" stroke-width="0.5%" />
</svg>

here the problem is it will load that full image.From that i want to give position values to show a particular image(like i did with <div>).But in <href> we cant give that position.

Community
  • 1
  • 1
user3501613
  • 596
  • 7
  • 28
  • How is your `svg` defined? I would recommend doing something [like this](https://css-tricks.com/svg-sprites-use-better-icon-fonts/), where each sprit is a `g` in your svg with a unique id, you load the svg once and then your href becomes `.attr("href", "#id-of-your-g-sprite"); ` – Mark May 11 '16 at 17:56
  • @Mark Thanks for the reply..But in that example each image are separate but in my case a single image is the combination of more than one images that's why in
    we are using some positions like 38% 16%/ 488px 79px no-repeat but in if i use like this it will affect the url and we will not get image.
     – user3501613 May 12 '16 at 07:41
  • @Mark: I added my sprite image in the question that is a single image from that i want to use position system to show a particular pic – user3501613 May 12 '16 at 07:50
  • That's a PNG of your SVG, can you include in your question the SVG itself? Open it in a text editor and cut/paste it into your question. – Mark May 12 '16 at 19:07
  • @Mark :I am sorry i edited that question 2 days before i forgot to remind you, I added my design please check – user3501613 May 16 '16 at 09:15

0 Answers0