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

226
05 апреля 2017, 13:37

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

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

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

Answer 1

Это довольно просто сделать. Вы просто используете элемент 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

Answer 2

Для автономных 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

READ ALSO
Верстка футера с градиентом
HTML

Верстка футера с градиентом

 246
Автоматическая смена width JQuery
HTML

Автоматическая смена width JQuery

Всем привет:)

 280
Извлечь информацию из дб в 2 колонки [требует правки]
HTML

Извлечь информацию из дб в 2 колонки [требует правки]

Подскажите как можно вывести информацию из дб в несколько колонок используя php,html,mysql, а то я просто через while и у меня выходит просто список...

 296
Возможно ли объединить два разных блока в один при просмотре на мобильном устройстве?
HTML

Возможно ли объединить два разных блока в один при просмотре на мобильном устройстве?

Всем здравствуйте! Адаптивный дизайн сайтаДва совершенно отдельных блока каждый со своим меню: один блок с главным меню в шапке, другой блок...

 264