Почему не открывается svg рисунок из другого файла?
<?xml version="1.0" standalone="no"?>
<svg xmlns:xlink=" http://www.w3.org/1999/xlink "
xmlns:svg=" http://www.w3.org/2000/svg "
xmlns=" http://www.w3.org/2000/svg " width="500" height="500">
<use xlink:href="3_.svg#picture3" x="0" y="0" />
</svg>
Что я делаю не так? код из самого файла 3_.svg https://pastebin.com/xsECQQNn все файлы лежат в одной папке
Ответы (1 шт):
Автор решения: Alexandr_TT
→ Ссылка
Попробуйте простую и надежную технику с размещением кода исходного файла в HTML с указанием width="0" и height="0" в шапке svg файла. Это позволит вам спрятать исходный файл и он не будет занимать место при вёрстке.
Далее его можно использовать по всему HTML документу многократно, увеличивая, уменьшая, позиционируя с помощью такой конструкции
<svg width="100" height="100" viewBox="0 0 500 500" >
Использование копии файла размером 100x100px
<use xlink:href="#picture3" />
</svg>
Копии исходного файла будут вести себя при верстке, как обычные блоки
<svg xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 500 500" >
<g id="picture3">
<rect x="0" y="0" height="376" width="500" style="fill:rgb(66,72,60)"/>
<circle cx="380" cy="120" r="80" style="fill:rgb(122,121,77);"/>
<circle cx="380" cy="120" r="55" style="fill:rgb(179,170,95);"/>
<circle cx="380" cy="120" r="30" style="fill:rgb(232,218,111);"/>
<polygon style="fill:rgb(214,142,83);" points="0,195 95,100 371,376 0,376"/>
<polyline style="fill:rgb(68,46,25);" points="0,195 90,120 295,376 0,376 0,195"/>
<polygon style="fill:rgb(107,76,48);" points="0,376 90,120 295,376 245,376 165,275 165,376
90,376 75,290 40,376 0,376 "/>
<rect style="fill:rgb(28,30,25);" x="0" y="376" height="124" width="500"/>
<rect style="fill:rgb(129,123,75);" x="0" y="376" height="24" width="500"/>
<rect style="fill:rgb(197,178,101);" x="0" y="376" height="8" width="500"/>
<rect style="fill:rgb(25,30,24);" x="50" y="0" height="376" width="12"/>
<rect style="fill:rgb(197,178,101);" x="62" y="0" height="376" width="3"/>
<polygon style="fill:rgb(25,30,24);" points="50,146 17,113 50,143"/>
<polygon style="fill:rgb(197,178,101);" points="50,143 17,113 50,140"/>
<polygon style="fill:rgb(25,30,24);" points="65,93 65,85 126,26"/>
<polygon style="fill:rgb(197,178,101);" points="65,86 65,82 126,26"/>
<rect style="fill:rgb(25,30,24);" x="100" y="0" height="376" width="8"/>
<rect style="fill:rgb(197,178,101);" x="108" y="0" height="376" width="3"/>
<rect style="fill:rgb(25,30,24);" x="190" y="0" height="376" width="25"/>
<rect style="fill:rgb(197,178,101);" x="215" y="0" height="376" width="4"/>
<polygon style="fill:rgb(25,30,24);" points="190,50 140,0 134,0 190,65"/>
<polygon style="fill:rgb(197,178,101);" points="190,50 140,0 143,0"/>
<polygon style="fill:rgb(25,30,24);" points="190,173 136,120 190,180"/>
<polygon style="fill:rgb(197,178,101);" points="190,173 136,120 190,168"/>
<rect style="fill:rgb(25,30,24);" x="235" y="0" height="376" width="10"/>
<rect style="fill:rgb(197,178,101);" x="245" y="0" height="376" width="3"/>
<rect style="fill:rgb(25,30,24);" x="320" y="0" height="376" width="10"/>
<rect style="fill:rgb(197,178,101);" x="330" y="0" height="376" width="3"/>
<polygon style="fill:rgb(25,30,24);" points="320,175 268,127 320,182"/>
<polygon style="fill:rgb(197,178,101);" points="320,175 268,127 320,169"/>
<polygon style="fill:rgb(25,30,24);" points="320,62 296,40 320,65"/>
<polygon style="fill:rgb(197,178,101);" points="320,62 296,40 320,59"/>
<polygon style="fill:rgb(25,30,24);" points="333,246 382,200 333,253"/>
<polygon style="fill:rgb(197,178,101);" points="333,246 382,200 333,241"/>
<rect style="fill:rgb(25,30,24);" x="390" y="0" height="376" width="6"/>
<rect style="fill:rgb(197,178,101);" x="396" y="0" height="376" width="3"/>
<polygon style="fill:rgb(25,30,24);" points="390,65 352,31 390,70"/>
<polygon style="fill:rgb(197,178,101);" points="390,65 352,31 390,61"/>
<polygon style="fill:rgb(25,30,24);" points="399,207 427,179 399,211"/>
<polygon style="fill:rgb(197,178,101);" points="399,207 427,179 399,203"/>
<rect style="fill:rgb(25,30,24);" x="460" y="0" height="376" width="30"/>
<rect style="fill:rgb(197,178,101);" x="456" y="0" height="376" width="4"/>
<polygon style="fill:rgb(25,30,24);" points="456,80 409,32 456,85"/>
<polygon style="fill:rgb(197,178,101);" points="456,80 409,32 456,73"/>
<polygon style="fill:rgb(25,30,24);" points="456,267 415,227 456,273"/>
<polygon style="fill:rgb(197,178,101);" points="456,267 415,227 456,263"/>
<polygon style="fill:rgb(28,30,25);" points="25,400 50,376 65,376 40,402"/>
<polygon style="fill:rgb(28,30,25);" points="75,402 100,376 111,376 87,402"/>
<polygon style="fill:rgb(28,30,25);" points="170,402 190,376 219,376 200,402"/>
<polygon style="fill:rgb(28,30,25);" points="212,402 235,376 248,376 226,402"/>
<polygon style="fill:rgb(28,30,25);" points="306,402 320,376 333,376 321,402"/>
<polygon style="fill:rgb(28,30,25);" points="388,402 390,376 399,376 398,402"/>
<polygon style="fill:rgb(28,30,25);" points="472,402 456,376 490,376 500,392 500,402"/>
<polygon style="fill:rgb(232,218,111);" points="276,61 280,60 282,56 284,60 288,61 284,63 282,67 280,63 276,61"/>
<polygon style="fill:rgb(232,218,111);" points="262,30 266,29 268,25 269,29 273,30 269,32 268,35 266,32"/>
<polygon style="fill:rgb(232,218,111);" points="265,90 267,89 268,87 269,89 271,90 269,91 268,93 267,91"/>
</g>
</svg>
<div >
<span >sssssss</span>
<span style="display:block">wwwwww</span>
<span >zzzzzzz</span>
</div>
<svg width="100" height="100" viewBox="0 0 500 500" >
<use xlink:href="#picture3" />
</svg>
<svg width="150" height="150" viewBox="0 0 500 500" >
<use xlink:href="#picture3" />
</svg>
<div>rrrrccccccccccccccccccccczzz</div>
<svg width="250" height="250" viewBox="0 0 500 500" >
<use xlink:href="#picture3" />
</svg>
<div>uuuuuuuuuuuuuuuuuuuuuuuuuuuu</div>
<svg viewBox="0 0 500 500" >
<use xlink:href="#picture3" />
</svg>