带有单独 SVG 文件的内联 SVG答案

【问题标题】：Inline SVG with separate SVG file带有单独 SVG 文件的内联 SVG
【发布时间】：2014-12-17 07:27:30
【问题描述】：

我的最终目标是在我的网页上显示可以轻松调整颜色的图像。

目前我正在使用内联 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; }

)。

我通过cating 我的 SVG 文件获得了d="<...>" 值。

我对这种方法的抱怨是：

我不从可编辑的来源加载图像。如果我想更改图像中的细节，我无法直接编辑 HTML。我要么必须将路径值复制到新的 SVG 文件中，要么将确切对应的 SVG 文件记录在案。完成编辑后，我不能只是 rsync 并依赖于我的 HTML 仍然指向同一个文件这一事实，而是我还必须编辑 HTML 并粘贴路径值。这很容易为我的工作流程增加 2-1000 个进一步的步骤，这对于像我这样反复试验的设计师来说非常重要。

有没有办法保持内联 SVG 提供的功能（如上所示）和广泛支持，而不实际上内联 SVG，而是从不同的位置加载它？

【问题讨论】：

stackoverflow.com/questions/11978995/…
事实上，在我决定使用内联 SVG 之前，我已经看到了该线程。我仍然决定这样做的原因是 jquery 代码对我不起作用，我不知道如何解决它。
啊，是的，他的 php 答案可能有效，我想这取决于您的外部源规范，我很想知道使用 ajax 来尝试这个会有多奇怪。对于一个 d3 项目，我也对此感到好奇，但我离开了它。

标签： html css svg

【解决方案1】：

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
});

【讨论】：

【解决方案2】：

是的。我之前的做法是使用服务器端脚本将 SVG 文件包含到页面上的元素中，如下所示：

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

通过包装它，我可以使用 CSS 定位特定的 SVG，而无需知道文件是否包含 ID，或者专门针对图像的实例。虽然我还没有尝试过，但按道理可以提出某种类似 AJAX 的请求来获取 SVG。

【讨论】：

我想在静态网站上使用它（没有任何服务器端魔法）