Question

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

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

）。

我通过d="<...>"我的SVG文件获取cat值。

我对此方法的抱怨是：

我不从可编辑的源加载图像。如果我想更改图片中的详细信息，则无法直接编辑HTML。我要么必须将路径值复制到新的SVG文件中，要么保留相应的SVG文件。在我完成编辑之后，我不能仅仅rsync依赖于我的HTML仍然指向同一个文件的事实，而是我也必须编辑HTML并粘贴路径值。这可以轻松地为我的工作流程增加2-1000个步骤，对于像我这样的试错设计师而言，这个步骤非常重要。

是否仍然保留内联SVG提供的功能（如上所示）和广泛支持，而实际内联SVG，而不是从其他位置加载？

Answer 1

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

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

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

Answer 2

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

带有单独SVG文件的内联SVG

2 个答案: