2015-12-05 3 views
2

У меня есть 3 SVG, показанных ниже. Я могу изменить цвет встроенного SVG. Любые идеи почему? (Код размещен на IIS)Измените цвет SVG на внешний источник через jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    </head> 
    <body> 
     <object id="objectSvg" type="image/svg+xml" data="eq.svg"></object> 
     <svg id="svg" width="100" height="100" viewBox="0 0 300 300"> 
      <use xlink:href="eq.svg#EarthquakeSymbol"></use> 
     </svg> 

     <svg id="inline" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="300px" height="300px"> 
      <circle cx="150" cy="150" r="140" stroke="black" stroke-width="20" fill="none"/> 
      <path id="mypath"stroke="#000000" stroke-width="20" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="3" fill="none" d="M 35.5 141.55 L 81.05 141.55 108.75 86.1 150.35 223.05 189.4 132.8 207.95 172.5 222.7 141.65 265.8 141.65"/> 
     </svg> 
     <script> 
      $('#objectSvg path').css({ stroke: "#ff0000" }); 
      $('#svg path').css({ stroke: "#ff0000" }); 
      $('#inlineSvg path').css({ stroke: "#ff0000" });</script> 
    </body> 
</html> 
+0

, какие из них цвет, который вы хотите изменить? – azad

+0

Отсутствует открытие '' тег – guest271314

+0

попробуйте это http://jsfiddle.net/kishoresahas/fbw536ks/1 –

ответ

0

Я уверен, что вы не можете создавать внешние загруженные SVG-файлы с помощью CSS. Почему бы не вырезать и вставить код из внешнего SVG в ваш html, как у двух других?

Это большой ресурс для получения информации об использовании SVGs: https://css-tricks.com/using-svg/

+0

Эта ссылка была одной из мест я получил большую часть информации. – f0rt

+0

Вы можете стилизовать их с помощью CSS, если вы введете CSS в загруженный документ с помощью javascript. –