Множественные перспективы в одном SVG

Question

Возможно ли иметь несколько различных фрагментов изображений в одном SVG, или даже просто имитировать такой эффект с использованием особых групп?

Я хочу показать разные части потенциально очень большого SVG, но я бы предпочел избежать его многократного рендеринга. Есть ли какой-то простой способ сделать это?

Перевод вопроса: Multiple perspectives into a single SVG @TikiTDO

@ассоциация:http://stackoverflow.com/questions/33224511/multiple-perspectives-into-a-single-svg?rq=1 — Alexandr_TT, Apr 03 '17 at 12:07
Возможный дубликат вопроса: Подключить svg в элементе через use — Crantisz, Apr 03 '17 at 12:09
@Crantisz вы не хотите пройтись по всему сайту и пометить дубликатами все статьи где встретите use и SVG Ведь use это основная команда в SVG/ В этой статье идет речь, как показать отдельные фрагменты большего изображения SVG — Alexandr_TT, Apr 03 '17 at 12:15
@Crantisz и что теперь, вы написали один ответ решение с использованием команды use в SVG и теперь считаете, что монополизировали эту команду? — Alexandr_TT, Apr 03 '17 at 12:19

Alexandr_TT · Accepted Answer · 2017-09-11T06:37:56.200

Это довольно просто сделать. Вы просто используете элемент use,
как предлагает Robert Longson.
Вот рабочий пример:

svg {
  border: solid 1px black;
}
svg#original {
  width: 450px;
}

<svg viewBox="0 0 450 300" id="original">
  <circle cx="225" cy="150" r="150" fill="orange"/>
  <circle cx="175" cy="110" r="25" fill="black"/>
  <circle cx="275" cy="110" r="25" fill="black"/>
  <circle cx="225" cy="70" r="150" fill="none" stroke="black" stroke-width="20" stroke-dasharray="0 145 180 1000"/>
</svg>

<br/>

<!-- part of the original at the same scale -->
<svg width="150" height="150">
  <use xlink:href="#original" x="-50" y="0" width="450" height="300"/>
</svg>

<!-- part of the original at 0.5x scale -->
<svg width="150" height="150">
  <use xlink:href="#original" x="0" y="0" width="450" height="300" transform="scale(0.5)"/>
</svg>

<!-- part of the original at 3x scale (and using a different method to achieve the scaling) -->
<svg width="150" height="150">
  <use xlink:href="#original" x="-450" y="-255" width="1350" height="900"/>
</svg>

Перевод ответа: Multiple perspectives into a single SVG @Paul LeBeau

score 1 · Answer 2 · edited May 23 '17 at 12:39

Для автономных SVG есть элемент view, который вы можете использовать, чтобы отображать только части вашей графики. Попробуйте это в отдельном файле.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" width="100" height="100">
    <view id="circleView" viewBox="0 0 100 100"/>
    <view id="rectView" viewBox="100 0 100 100"/>
    <a xlink:href="#rectView">
        <circle cx="50" cy="50" r="45" fill="blue"/>
    </a>
    <a xlink:href="#rectView">
        <rect x="105" y="5" width="90" height="90" fill="royalblue" stroke="#53c"></rect>
    </a>
</svg>

Просто нажмите на круг, чтобы увидеть прямоугольник и на прямоугольнике, чтобы увидеть круг.
Это также работает, если вы ссылаетесь на свой svg через img

<img src="your.svg#circleView"/>
<img src="your.svg#rectView"/>

Я обнаружил, что это не работает для встроенного SVG. Здесь вы можете использовать аналогичный подход. Вы можете просто изменить viewBox вашего SVG. В отличие от вышесказанного, viewBoxe's можно даже анимировать!

<svg viewBox="0 0 460 360" width="200" height="200">
  <polygon id="triangle" points="100,10,450,350,10,350" fill="#52c" />
  <circle id="circle" cx="50" cy="50" r="45" fill="#c52" />
  <rect id="rect" x="255" y="155" width="200" height="200" fill="#5c2" />
<animate attributeName="viewBox" to="250 150 210 210" dur="0.5s" begin="circle.click" fill="freeze" />
  <animate attributeName="viewBox" to="0 0 100 100" dur="0.5s" begin="triangle.click" fill="freeze" />
  <animate attributeName="viewBox" to="0 0 460 360" dur="0.5s" begin="rect.click" fill="freeze" />
</svg>
<br/>click on any of he shapes!

Конечно вы можете также точно использовать viewBox при помощи script..
Если вы хотите ссылаться на разные части вашего SVG, вы можете использовать use - элемент, как предложено в других ответах.

Прим. переводчика
Как взаимодействуют между собой viewport и viewBox - это фундаментальная основа для понимания процессов в SVG при отображении фрагментов бесконечного полотна SVG.
Для расширения знаний по этому вопросу посмотрите эту статью на нашем сайте.

Перевод ответа: Multiple perspectives into a single SVG @Holger Will

Множественные перспективы в одном SVG

2 Answers2

Linked