内联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文件

回答

相关问题