Question

我是否只能在#id或<img>标签中加载SVG的一部分（可以由<object>标记）？

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

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

Answer 1

请在视图源中查看this svg file。在根svg中，还有另外两个svg元素。这2个svg元素每个都有一个id，该样式表示nestedsvg元素仅在:target时可见。

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>

Answer 2

您想要实现的目标是使用另一个内联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安装在该区域内。

在<img/>（或<object>）中请求SVG的一部分

2 个答案: