內聯SVG與單獨的SVG文件

我的最終目標是在我的網頁上顯示圖像，我可以很容易地調整顏色。內聯SVG與單獨的SVG文件

目前，我正在用內聯SVG做它;像這樣：

 <a href="https://thechymera.tumblr.com"> 
     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewbox="0 0 100 100"> 
     <path class="social" d="M 100,0 0,0 0,100 100,100 z M 71.028,79.925 c -2.886,1.358 -5.506,2.315 -7.848,2.865 -2.344,0.545 -4.877,0.819 -7.599,0.819 -3.092,0 -4.917,-0.388 -7.291,-1.166 -2.375,-0.784 -4.402,-1.902 -6.077,-3.337 -1.681,-1.447 -2.841,-2.986 -3.49,-4.612 -0.65,-1.628 -0.972,-3.99 -0.972,-7.082 l 0,-23.714 -9.187,0 0,-9.576 c 2.655,-0.861 5.736,-2.099 7.626,-3.708 1.899,-1.615 3.418,-3.547 4.564,-5.807 1.149,-2.255 1.938,-5.132 2.369,-8.62 l 9.618,0 0,15.642 15.635,0 0,12.071 -15.637,0 0,17.34 c 0,3.924 -0.051,6.185 0.366,7.297 0.413,1.106 1.447,2.255 2.574,2.919 1.498,0.898 3.207,1.346 5.132,1.346 3.425,0 6.832,-1.112 10.216,-3.338 l 0,10.665 0,-0.004 z"></path> 
     </a>

（並指定我的顏色鏈接.css文件：

svg:hover .social { fill: #efa5d6; } 
svg .social { fill: #b5b5b5; }

）。

我通過cat得到了d="<...>"值我的SVG文件。

我用這種方法的抱怨是：

我不從可編輯的源加載圖像。如果我想更改圖像中的細節，我無法直接編輯HTML。我要麼必須將路徑值複製到新的SVG文件中，要麼保留相應的SVG文件。在完成編輯後，我不能僅僅依靠rsync，而依賴於我的HTML仍指向同一文件的事實，而不得不編輯HTML，並粘貼路徑值。這很容易在我的工作流程中增加2-1000個步驟，對於像我這樣的試驗錯誤設計師來說，這非常重要。

無論如何保持內聯SVG提供的功能（如上所示）和廣泛的支持，實際上沒有內聯SVG，而是從不同位置加載它？

來源

2014-10-21 TheChymera

http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement – 2014-10-21 22:30:42

我在我決定使用內聯SVG之前，事實上已經看到了這個線程。我仍然決定的原因是，jQuery代碼不適合我，我不知道如何解決它。 – TheChymera 2014-10-21 22:34:35

啊，是啊，他的PHP的答案也許工作，我想這取決於你的外部源規範，我很想看看你可以使用Ajax來試試這個有多奇怪。我也很好奇d3項目，但我放棄了它。 – 2014-10-21 22:46:43

是的。我之前已經做了它的方式是通過使用服務器端腳本包括SVG文件到頁面上的元素，像這樣：

<div id="my-svg-image"> 
    <?php include "image.svg"; ?> 
</div>

通過包裝它，我可以針對與CSS的具體SVG而不必知道該文件是否包含ID，或專門針對圖像的實例。儘管我還沒有嘗試過，但有理由認爲可以使用某種類似AJAX的請求來獲取SVG。

來源

2014-10-21 22:30:27

我想在一個靜態網站上使用它（無論服務器端magick是什麼） – TheChymera 2014-10-21 22:35:26

http://jsbin.com/yupago/edit

svgUrl = 'http://upload.wikimedia.org/wikipedia/commons/f/f2/University_of_Tirana_logo.svg'; 


$("#svg").load(svgUrl + " svg", function() { 

$("#svg").find('path').css({fill:'#000'}); 
    //do stuff 
});

來源

2014-10-21 23:41:57

內聯SVG與單獨的SVG文件

回答

相關問題