在（或）中请求SVG的一部分

Question

我可以在#id或<img>标签中仅加载SVG的一部分（可以通过<object>标签识别）吗？

原因（如果我需要的话）是我不想拥有两个SVG文件，如果我只使用已经使用过的一部分。

如果我不能使用这些标签，我可以使用CSS或其他方式吗？

Answer 1

您想要实现的是使用另一个内联SVG而不是<img>或<object>标记最简单的方法：

<svg style="width:200px;height:200px" viewBox="35 50 150 150">
    <use xlink:href="myFile.svg#head" />
</svg>

你需要做的两件事是

• viewBox：要获得您想要的SVG部分，您必须确定路径的位置以及它具有的边界框。 <use>元素注意只有您选择的元素是可见的，但它不能识别该元素内部的位置。
• 所选元素的总体大小显示在。 SVG没有“自然尺寸的概念，你总是需要给出一个宽度和高度。然后，viewBox将被安装在该区域内。

Answer 2

请在view-source中查看this svg file。在根svg内部还有2个其他的svg元素。这两个svg元素各有一个id，并且样式表示只有:target才能看到nestedsvg元素。

svg > svg:not(:target) {
        display: none;
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px"  viewBox="0 0 225 225">

<style type="text/css">
 <![CDATA[  
    svg > svg:not(:target) {
    display: none;
    }
     ]]> 
</style>
<desc>
<g id="cat">
<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M121.506,..."/>
<path id="head" fill-rule="evenodd" clip-rule="evenodd" d="M129.747,..."/>
</g>
</desc>
<svg version="1.1" id="blackcat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 225 225">
<use xlink:href ="#cat" fill="black" />
</svg>
<svg version="1.1" id="redcat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 225 225">
<use xlink:href ="#cat" fill="red" />
</svg>

</svg>

以下是如何使用其中一个svg元素作为图像或对象：

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat" width="200" />

<object width="200"  data="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#blackcat"></object>