Запросить часть SVG в <img>(или <object>)

Question

Могу ли я загрузить только часть SVG (которая может быть идентифицирована с помощью тега #id) в теге <img> или <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

Пожалуйста, посмотрите на этот svg файл в view-source.Внутри корневого svg есть 2 других элемента svg.Эти 2 элемента svg имеют каждый идентификатор, и стиль говорит, что элементы 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>