Jump to content
GreenSock

ltscribble

accessing svg paths in external file

Recommended Posts

svg4everybody is replacing the <use> element with the actual actual SVG markup. I think that is what the polyfill does.

 

<div class="wrapper">
  <div class="toptaak_icon" style="visibility: inherit; opacity: 1;">
    <svg class="alkmaar_icon" role="presentation" viewBox="0 0 150 160">
      <g id="maaltijd" data-svg-origin="75.00999909639359 159.99029541015625" transform="matrix(1,0,0,1,0,0)" style="">
        <path d="M149.07,5.18a1.74,1.74,0,0,0-.75-1.52,1.69,1.69,0,0,0-.89-.32C128.88,1.91,119.73,0,75,0S21.12,1.91,2.57,3.34a1.69,1.69,0,0,0-.89.32A1.74,1.74,0,0,0,.93,5.18C2.44,43.27.38,82.88.3,121.79c0,1.69,0,10.6,8,13.77,21.07,8.41,40.94,15.88,63.93,23.76a6.1,6.1,0,0,0,5.56,0c23-7.88,42.86-15.35,63.93-23.76,7.94-3.17,8-12.08,8-13.77C149.62,82.88,147.56,43.27,149.07,5.18ZM74.94,49a21.16,21.16,0,0,1-1.1,7.28,11.69,11.69,0,0,1-3.64,5.18,12.5,12.5,0,0,1-5,2.3c6.57,49.23,2.07,65.41-5.23,65.77h-2.2c-8-.36-10.21-16.2-3-65.48l-1.3-.23a12.81,12.81,0,0,1-5.21-2.36,11.45,11.45,0,0,1-3.64-5.18A20.67,20.67,0,0,1,43.46,49V27.38a3.93,3.93,0,1,1,7.85,0V49a13.85,13.85,0,0,0,.63,4.58,3.56,3.56,0,0,0,1.15,1.7,4.4,4.4,0,0,0,1.67.79V27.41a3.93,3.93,0,1,1,7.85,0V56.22a5.57,5.57,0,0,0,2.73-1,3.41,3.41,0,0,0,1.12-1.7A13.09,13.09,0,0,0,67.09,49V27.38a3.93,3.93,0,1,1,7.85,0Zm24.24,81h-.27c-9.34-.39-13.71-8.22-3.92-59.44C79.78,43.08,92.84,22.41,106.32,20V64.78C106.32,114,108.52,129.61,99.18,130Z">
        </path>
      </g>
    </svg>
  </div>
</div>

 

The startAnimation function is being called because the code you copied from my demo isn't the best example. The .always() call here will still be called, even if what was loaded isn't valid.

$.get(svgUrl)
    .then(injectSvg)
    .always(startAnimation);

 

That was only for the purpose of that demo because the startAnimation function tries to animate everything in that demo.

 

A better way would be...

$.get(svgUrl, function(svg) {
  container.append(svg.documentElement);
}).then(startAnimation);

 

 

Or for multiple...

$.when(
    
    $.get("svg1.svg", function(svg) {
      $("#container1").append(svg.documentElement);
    }),
    $.get("svg2.svg", function(svg) {
      $("#container2").append(svg.documentElement);
    }),
    $.get("svg3.svg", function(svg) {
      $("#container3").append(svg.documentElement);
    }),
    $.get("svg4.svg", function(svg) {
      $("#container4").append(svg.documentElement);
    })
    
  ).then(startAnimation);

 

 

The svg that is returned in that callback can be used to append your symbols. So maybe something like this.

 

$.get("icons.svg", function(svg) {
  
   var someSvg = $("#some-svg");
   $("#some-icon", svg).children().each(function(i, element) {
    someSvg.append($(element).clone(true))
  });
}).then(startAnimation);

 

The problem with using svg4everybody for animations is that it loads stuff asynchronously, so you don't know when the actual svg has been loaded. It's working for you because the file is cached, but for anybody else visiting your page, the animation won't work the first time.

  • Like 3
Link to comment
Share on other sites

Thanks OSUBlake for your thorough reply.

I'll definitely try that last bit of javascript out.

 

Link to comment
Share on other sites

  • 9 months later...
On 1/18/2015 at 3:07 PM, Raynor said:
On 1/19/2015 at 12:05 AM, OSUblake said:

Hi Scribble,

 

The SVG inside the <use> tags won't show up in your CodePen because the file is on another domain and you aren't referencing it (#left-hand).

 

 



<svg class="left-hand">
  <use xlink:href="http://my-server.com/left-hands.svg#left-hand"></use>
</svg>

However, using <use> might not be the best solution if you are trying to create SVG animations. First, IE does not support it, although there are ways around this. Second, the SVG is encapsulated so you won't be able to directly select your shapes/paths.

 

 



// Won't work with <use>
var hand = $("#left-hand-palm");

Diaco did a good job of showing us how to embed and reference an SVG. However, an embedded SVG is encapsulated inside an external document, so things like your CSS styles won't crossover into the SVG's document. 

 

I like to load external SVGs via Ajax, and then inject them into the page. Doing this will allow you to interact with the SVG just like an inline SVG. No need to modify your code!

 

Here's a demo of how to display an SVG using the ajax, object, use, and inline approaches. Notice how only the ajax version works like the inline version.

 

Plunker URL: http://plnkr.co/edit/LneUEK?p=preview


Its a old post but by trying this  i am getting into CORS issue,
which is with any method of loading SVG via AJAX,

and the only other working thing is INLINE SVG,

any other solution?
or i have to make a temp web server for development?

 

Link to comment
Share on other sites

13 hours ago, rhut_tiger said:

or i have to make a temp web server for development?

 

Yes, you need a server for AJAX to work.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×