28

Этот вопрос вызван следующей важной темой, затронутой в хорошем вопросе почти полгода назад. Рисует ли браузер то, что находится за областью видимости SVG холста?

Взаимодействие между собой viewport и viewBox довольно сложный вопрос, но это фундамент для понимания и успешного использования SVG в вёрстке и анимации веб страничек. Я изучил много зарубежных интернет ресурсов на эту тему и конечно прежде всего спецификацию w3С, но я не носитель английского языка, да и изложено там, на мой взгляд несколько запутанно. Ниже приведу на примерах, как я понял этот процесс взаимодействия viewport и viewBox.
viewport - это область видимости, часть бесконечного SVG холста, которую видит пользователь на дисплее своего гаджета. Размеры viewport, допустим; - width="1000" height="600" задает автор файла SVG с началом координат в левом верхнем углу.

viewBox - в качестве примера - viewBox="0 0 500 300" - это виртуальная, прямоугольная область просмотра, которую пользователь не видит, но от которой зависит какая часть бесконечного полотна SVG будет показана на дисплее пользователя. Кроме того последние два атрибута viewBox отвечают за масштабирование изображения. Подробнее здесь.

Интересен сам процесс выборки с помощью viewBox фрагмента полотна SVG, последующего преобразования фрагмента и рендеринг его на дисплее пользователя. Ниже поясняющий рисунок.

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="500" height="500" id="svg5452" version="1">
  <defs>
    <filter id="filter5435-6" color-interpolation-filters="sRGB">
      <feGaussianBlur stdDeviation="1" id="feGaussianBlur5437-8"/>
    </filter>
  </defs>
   <g id="layer1" transform="translate(0,-552.362)">
    <path d="M33 752 405 567l0 0" id="path2995" style="fill:#fc0;stroke-dashoffset:25;stroke-linecap:round;stroke-width:1.3;stroke:#000"/>
    <path d="m95 706 184-106 0 248-184 106z" id="path5419" transform="matrix(1.4874974,0,0,1.2712695,-7.6174194,-192.77799)" style="fill:#b3b3b3;filter:url(#filter5435-6)"/>
    <path d="m132 567 0 450 0 0 0 0" id="path2993" style="fill:#fc0;stroke-dashoffset:25;stroke-linecap:round;stroke-width:1.4;stroke:#000"/>
    <path d="m134 703 68-34 0 68-68 34z" id="path2999" style="fill:#94cc00;stroke-dashoffset:25;stroke-linecap:round;stroke-width:1.4;stroke:#000"/>
    <path d="m347 818-212-113 0 0 0 0" id="path5215" style="fill:#b3b3b3;stroke-dasharray:0.7;stroke-dashoffset:2.8;stroke-linecap:round;stroke-width:1.4;stroke:#efd900"/>
    <path d="m348 818 43-20 0 39-43 20z" id="path2997" style="fill:#fc0;stroke-dashoffset:25;stroke-linecap:round;stroke-width:0.8;stroke:#000"/>
    <path d="m348 849-215-84 0 0 0 0" id="path5217" style="fill:none;stroke-dashoffset:4.3;stroke-linecap:round;stroke-width:1.4;stroke:#efd900"/>
    <path d="m201 737 0 0 0 0 190 100-36-19" id="path5221" style="fill:#f10000;stroke-dashoffset:22.2;stroke-width:1.5;stroke:#ed0"/>
    <path d="m391 798-189-129 0 0 0 0" id="path5219" style="fill:none;stroke-dashoffset:20.7;stroke-width:1.4;stroke:#f7f100"/>
    <path d="m458 861-64-60 0 0 0 0" id="path3810" style="fill-opacity:0.9;fill:#8b91df;stroke-dashoffset:25;stroke-linecap:round;stroke-width:1.4;stroke:#000"/>
    <path d="m462 869-85-50 0 0 0 0" id="path3812" style="fill-opacity:0.9;fill:#8b91df;stroke-dashoffset:25;stroke-linecap:round;stroke-width:1.4;stroke:#000"/>
    <path d="m454 873-92-34 0 0" id="path3814" style="fill-opacity:0.9;fill:#8b91df;stroke-dashoffset:25;stroke-linecap:round;stroke-width:1.3;stroke:#000"/>
    <path d="M454 876 352 851" id="path3816" style="fill-opacity:0.9;fill:#8b91df;stroke-dashoffset:25;stroke-linecap:round;stroke-width:1.2;stroke:#000"/>
    <g id="g4066" transform="matrix(0.38032348,0,0,0.37761044,232.98885,603.74368)">
      <path id="path3804" d="m526 751c0 0 20-14 67-14 56 0 67 25 67 25l0 0 0-1" style="fill:none;stroke-dashoffset:25;stroke-linecap:round;stroke-width:1.5;stroke:#000"/>
      <g id="g4055">
        <g id="g3872" transform="matrix(0.97932405,0.21454349,-0.03440915,0.93598881,14.984082,-76.741419)">
          <g transform="matrix(0.96020224,0,0,1.0308731,23.199143,-22.772714)" id="g3863">
            <path id="path3806" d="m374 326c0 16-5 29-10 29-6 0-10-13-10-29 0-16 5-29 10-29 6 0 10 13 10 29z" transform="matrix(1.2648349,0.71565329,-0.73419562,1.4071283,388.66074,-23.50662)" style="fill-opacity:0.9;fill:#8b91df;stroke:#000"/>
            <g id="g3856">
              <path id="path3034" d="m628 605c0 0-3 27 14 74 21 56 44 55 44 55l0 0-1 0" style="fill:none;stroke-dashoffset:25;stroke-linecap:round;stroke-width:1.5;stroke:#000"/>
              <path transform="matrix(1.2648349,0.71565329,-0.73419562,1.4071283,389.06784,-30.56644)" d="m365 329c0 7-2 13-4 13-2 0-4-6-4-13 0-7 2-13 4-13 2 0 4 6 4 13z" id="path3808" style="fill:#2f003b;stroke:#000"/>
              <g id="g3852">
                <text xml:space="preserve" x="245" y="256" id="text3848" transform="scale(2,2)" style="-inkscape-font-specification:Rosewood Std Regular;fill:#000;font-family:Rosewood Std Regular;font-size:64;letter-spacing:0;line-height:125;word-spacing:0">
                  <tspan y="256" x="245" id="tspan3850"/>
                </text>
              </g>
            </g>
          </g>
        </g>
      </g>
    </g>
    <text xml:space="preserve" x="178" y="1320" id="text3906" transform="matrix(1.3253407,-0.71279682,0.02282854,0.74224528,0,0)" style="-inkscape-font-specification:Minion Pro Cond Bold;fill:#000;font-family:Minion Pro Cond;font-size:32;font-weight:bold;letter-spacing:0;line-height:125;word-spacing:0">
      <tspan id="tspan3908" x="178" y="1320">
        viewBox
      </tspan>
    </text>
    <path d="m451 867-81-37" id="path4020" style="fill-opacity:0.9;fill:#8b91df;stroke-dashoffset:25;stroke-linecap:round;stroke-width:1.1;stroke:#000"/>
    <text xml:space="preserve" x="821" y="-182" id="text4079" transform="matrix(0.24480584,0.87602428,-0.94306552,0.71016161,0,0)" style="-inkscape-font-specification:Minion Pro Cond Bold;fill:#000;font-family:Minion Pro Cond;font-size:30.4;font-weight:bold;letter-spacing:0;line-height:125;word-spacing:0">
      <tspan id="tspan4081" x="821" y="-182">
        8
      </tspan>
    </text>
    <path d="m405 566-18 7 4 3z" id="path5286" style="fill-opacity:0.9;fill:#0b0fdb;stroke-dashoffset:25;stroke-linecap:round;stroke-width:1.4;stroke:#000"/>
    <path d="m132 1017 3-15-6 0z" id="path5288" style="fill-opacity:0.9;fill:#0207df;stroke-dashoffset:25;stroke-linecap:round;stroke-width:1.4;stroke:#000"/>
    <text transform="matrix(0.46123189,0.67913613,-1.0097074,0.6813736,0,0)" id="text5290" y="364" x="1089" xml:space="preserve" style="-inkscape-font-specification:Minion Pro Cond Bold;fill:#000;font-family:Minion Pro Cond;font-size:30.8;font-weight:bold;letter-spacing:0;line-height:125;word-spacing:0">
      <tspan y="364" x="1089" id="tspan5292">
        8
      </tspan>
    </text>
    <text xml:space="preserve" x="164" y="622" id="text5294" transform="matrix(0.83410914,-0.33044431,-0.00717685,1.2017271,0,0)" style="-inkscape-font-specification:Minion Pro Cond Bold;fill:#000;font-family:Minion Pro Cond;font-size:28.4;font-weight:bold;letter-spacing:0;line-height:125;word-spacing:0">
      <tspan id="tspan5296" x="164" y="622">
        (0,0)
      </tspan>
    </text>
    <path id="path4013" d="m359 675 32-16 0 32-32 16z" style="fill:#fc0;stroke-dashoffset:25;stroke-linecap:round;stroke-width:0.7;stroke:#000"/>
    <path d="m378 778-1-72 0 0" id="path4015" style="fill:#fc0;stroke-dashoffset:25;stroke-linecap:round;stroke-width:1.4;stroke:#000"/>
    <path d="m377 707-6 23 15 0z" id="path4461" style="fill:#fc0;stroke-dashoffset:25;stroke-linecap:round;stroke-width:1.5;stroke:#000"/>
    <g id="g4487" transform="matrix(1.4874974,0,0,1.2712695,-0.61034849,-201.51524)">
      <path d="m220 827-48 27 0 0" id="path4472" style="fill:#fc0;stroke-dashoffset:25;stroke-linecap:round;stroke-width:0.9;stroke:#000"/>
      <path d="m172 855 18-5-4-8z" id="path4474" style="fill:#fc0;stroke-dashoffset:25;stroke-linecap:round;stroke-width:1;stroke:#000"/>
    </g>
    <path d="m135 860 68-34 0 68-68 34z" id="path4493" style="fill:none;stroke-dashoffset:25;stroke-linecap:round;stroke-width:4.9;stroke:#000"/>
    <path id="path4491" d="m170 891 68-34 0 68-68 34z" style="fill-opacity:0.9;fill:#ffcc0f;stroke-dashoffset:25;stroke-linecap:round;stroke-width:1.4;stroke:#000"/>
    <path d="m315 637 32-16 0 32-32 16z" id="path4498" style="fill:none;stroke-dashoffset:25;stroke-linecap:round;stroke-width:4.9;stroke:#000"/>
    <text xml:space="preserve" x="-22" y="784" id="text4596" transform="matrix(0.94153265,-0.49180502,0.20084042,0.95719004,0,0)" style="-inkscape-font-specification:Minion Pro Cond Bold;fill:#000;font-family:Minion Pro Cond;font-size:32;font-weight:bold;letter-spacing:0;line-height:125;word-spacing:0">
      <tspan id="tspan4598" x="-32" y="754">
        viewport
      </tspan>
    </text>
  </g>
</svg>

viewBox можно разместить в любом месте SVG полотна. Его положение зависит от первых двух атрибутов: min-x, min-y.

Далее идет захват фрагмента SVG полотна, расположенного под viewBoxом.

На следующем этапе система координат viewBox совмещается с началом системы координат viewport. И фрагмент захваченного viewBoxом изображения передается обратно во viewport. Идет процесс согласования и тут возможны варианты:

  1. Если min-x = 0 и min-y = 0, ширина и высота viewportа равны соответственно ширине и высоте viewBoxа, то изображение фрагмента не сдвигается и не масштабируется.

  2. Если viewBox сдвинут вправо - min-x > 0 изображение сдвигается влево. Понятно, что захватив изображение правее viewport и потом совмещая с началом координат мы тем самым сдвигаем изображение влево.

  3. Если viewBox сдвинут ниже viewporta - min-y > 0 изображение поднимется вверх.

Масштабирование зависит от соотношения стророн viewporta и viewBoxа

  1. При условии, что соотношение сторон viewport / viewBox > 1 - происходит пропорциональное увеличение масштаба исходного фрагмента SVG .

Допустим окно viewBox в два раза меньше viewport. Поэтому при обратном совмещении viewBox с viewport один пиксель из viewBox растягивается до 2-х пикселей viewport.

  1. При viewport / viewBox < 1 - происходит уменьшение изображения.

    viewBox, который больше viewport захватывает весь viewport и соседние с ним участки полотна SVG, а затем всё это уплотняет обратно во viewport.

    Повторяюсь, пользователь видит на дисплее изображение, которое после всех преобразований попало во viewport. Можно вывести правило, которое легко запомнить:

    У viewBox всё наоборот.

    Поэтому, если вправо перемещаем viewBox - min-x > 0, то изображение сдвигается влево.

    Если увеличиваем viewBox, то изображение уменьшается.

    На основе этого приходят мысли, что можно реализовать горизонтальный и вертикальный параллакс, не используя CSS, JavaScript. Для этого надо просто перемещать viewBox вдоль полотна SVG, как показано на рисунке ниже. Нажмите кнопку Start.

    Верхнее окно это viewport, который видит пользователь, а цветная полоса - это полотно SVG.
    Реализация горизонтального параллакса - здесь

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
      width="600" height="360" viewBox="0 0 600 360"
      >
      <title> Explanation horizontal of parallax viewBox </title>
      <desc> animate the horizontal parallax svg-art.ru by modifying a coordinate of the viewBox </desc>
     <defs>
    <g id="canvas-svg" stroke-width="2px">	
      <g id="canvas-frame1">
       <rect id="v-port1" x="25" y="200" width="110" height="110" stroke="skyblue"   fill="yellowgreen" /> 
    	<text id="t-port1" x="75" y="255" style="font-size: 16pt;">1 </text>
    	<text  x="26" y="303" > 0 </text>
     </g>		    
      <g id="canvas-frame2">		
    		<rect id="v-port2" x="135" y="200" width="110" height="110" stroke="skyblue"  fill="dodgerblue" /> 
    		<text id="t-port2" x="185" y="255" style="font-size: 16pt;">2 </text>
    		<text  x="136" y="303" > 1168 </text>
     </g>		  
      <g id="canvas-frame3">		
    		<rect id="v-port3" x="245" y="200" width="110" height="110" stroke="skyblue"  fill="crimson"  /> 
    		<text id="t-port3" x="295" y="255" style="font-size: 16pt;">3 </text>
    		<text  x="246" y="303" > 2336 </text>
      </g>
          <g id="canvas-frame4">		
    		<rect id="v-port4" x="355" y="200" width="110" height="110" stroke="skyblue"  fill="orange" /> 
    		<text id="t-port4" x="405" y="255" style="font-size: 16pt;">4 </text>
    		<text  x="356" y="303" > 3504 </text>
         </g>
           <g id="canvas-frame5">		
    		<rect id="v-port5" x="465" y="200" width="110" height="110" stroke="skyblue" stroke-width="1px" fill="yellow" /> 
    		<text id="t-port5" x="515" y="255" style="font-size: 16pt;">5 </text>
    		<text  x="466" y="303" > 4672 </text>
           </g>   
     </g>
    	
     </defs>
     
      <g id="first-rect">
       <rect  x="25" y="25" width="110" height="110" stroke="skyblue" stroke-width="1px" fill="yellowgreen" /> 
    	<text  x="75" y="85" style="font-size: 16pt;">1 </text>
    	<text  x="26" y="135" > 0 </text>
     </g>		    
    
    
      <desc>The SVG canvas is infinite in size. In our example, user a viewport of SVG is in the leftmost position.</desc>  
    <use xlink:href ="#canvas-svg" x="0" y="0"> </use>
      	
    <desc> viewBox is moved along canvas SVG</desc>
     <g id="viewBox1">
     <rect id="v-box" x="25" y="200" width="110" height="110" stroke="skyblue" stroke-width="5px" fill="none" />
    	 <text id="t-port1" x="45" y="225" style="font-size: 16pt; fill:blue;">viewBox </text>   
    	<animateTransform attributeName="transform" type="translate" begin="startButton.click+0.5s" end="stopButton.click" dur="20s" from="0 0" to="440 0" repeatCount="indefinite" restart="whenNotActive" fill="freeze"/>
     </g>	
     
    
    <desc> The image moves to the left viewport</desc>
    <use xlink:href ="#canvas-svg" x="0" y="0">
        <animateTransform attributeName="transform" type="translate" begin="startButton.click+0.5s" end="stopButton.click" dur="20s" from="0 -170" to="-440 -170" repeatCount="indefinite" restart="whenNotActive" fill="freeze" />
      </use>
    
    <desc> Grey background image of the canvas SVG</desc>
     <g fill="#E5E5E5" stroke="#E5E5E5">
     <rect  x="135" y="0" width="465" height="195"    />   
      <rect  x="0" y="0" width="25" height="195"    />   
      <rect  x="0" y="0" width="135" height="30"    />   
      <rect  x="25" y="135" width="135" height="60" />   
      <rect  x="0" y="315" width="600" height="85"  />   
      <rect  x="0" y="195" width="25" height="120"  />
      <rect  x="575" y="195" width="25" height="120" />
     </g> 
      
      <g stroke-width="1px" stroke-dasharray = "5 5"> 
      	<line x1="25" y1="140" x2="25" y2="195" stroke="blue"  />
     <line x1="135" y1="140" x2="135" y2="195" stroke="blue" stroke-width="1px"  />
      </g>		
       <g style="font-size: 16pt; fill:blue;">
    	<text  x="45" y="170"  > viewport </text> 
    	 <text  x="15" y="20" style="font-size: 14pt;"> display the user's  </text>
    	    <text  x="230" y="90" style="font-size: 40pt; fill:#1E90FF"> canvas SVG </text> 
       </g> 
    
    <g id="startButton">
    	<rect  x="520" y="325" rx="8" ry="8" width="60" height="20" fill="#58AE2A" />
    	<text  x="550" y="340" font-size="16" font-weight="bold" font-family="Arial" text-anchor="middle" 
    	fill="white" >Start</text>
    </g>
            <g id="stopButton">
    			<rect  x="450" y="325" rx="8" ry="8" width="60" height="20" fill="#1E90FF" />
    			<text  x="480" y="340" font-size="16" font-weight="bold" font-family="Arial" text-anchor="middle" 
    			fill="white" >Stop</text>
    		</g>	
    
    </svg>

    Практический пример взаимодействия viewport и viewBox в переведенной статье с enSO на нашем сайте.

5
  • 5
    Вы Бог SVG! Я хочу от вас сына!
    – Yuri
    Commented 16 янв. 2017 в 21:39
  • Не, почку оставьте себе :D
    – Yuri
    Commented 16 янв. 2017 в 21:43
  • Alexandr_T, нет желания, сделать курс видео уроков по SVG?
    – Air
    Commented 31 окт. 2017 в 21:12
  • 1
    @Air, его сайт - лучше любого видео урока будет. Commented 2 июн. 2018 в 14:48
  • 1
    @ВарламЕрофеич, я в курсе и согласен... Но и видео не помешало... БЫ...)
    – Air
    Commented 2 июн. 2018 в 18:25

2 ответа 2

12

Выше были примеры взаимодействия viewport и viewBox.

А что происходит, когда в SVG документе есть только viewport, а viewBox не прописан?

svg version="1.1" width="1280" height="1024"
1. Масштабирования изображения не будет происходить при изменении размеров родительского контейнера или размеров окна браузера.

Команда - preserveAspectRatio тоже не будет работать. Кстати это единственный способ избавиться от неё, так как, если даже её не написать в шапке SVG файла, то по умолчанию она будет иметь значения xMid yMid

  1. Второй вариант. В шапке SVG файла присутствует только viewBox

svg version="1.1" viewBox = "0 0 640 516"
В этом случае viewport принимает значения по умолчанию - 100% ширины и высоты окна браузера. Масштабирование становится возможным. Масштаб изображения высчитывается из соотношения соответственно высоты окна браузера и viewBox. То есть при уменьшении viewBox мы увеличиваем изображение на дисплее, так как при этом не изменяем размер дисплея. И наоборот,- уменьшая окно браузера мы уменьшаем размер изображения.

Команда - preserveAspectRatio становится активной. Ниже три примера, как она оказывает влияние на позиционирование изображения при изменении своих атрибутов.

preserveAspectRatio="xMinYMin meet"

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="100" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="xMinYMin meet"   style="border:1px solid red;">
<rect id="rect1"  width="100" height="100" fill="greenyellow" />
</svg>

preserveAspectRatio="xMidYMid meet"

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="100" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="xMidYMid meet"   style="border:1px solid red;">
<rect id="rect1"  width="100" height="100" fill="greenyellow" />
</svg>

preserveAspectRatio1="xMaxYMax meet"

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="100" viewBox="0 0 100 100" version="1.1" preserveAspectRatio1="xMaxYMax meet"   style="border:1px solid red;">
<rect id="rect1" x="100" width="100" height="100" fill="greenyellow" />
</svg>

2
  • хочу попробовать использовать на своем новом проекте svg спрайты. Вариантов их подключения видел несколько. подскажите пожалуйста из вашего опыта как лучше их подключать, использовать (можно и ссылку, чтобы посмотреть)
    – Alex
    Commented 23 янв. 2017 в 6:37
  • @Alex Есть специальный раздел, здесь на сайте. Задайте там свой вопрос с тегом svg-спрайт. Так будет больше шансов получить развернутый ответ. Commented 23 янв. 2017 в 7:12
10

1. Пример использования viewport и viewBox для скрытия, показа изображения с одновременным масштабированием

  • Из описания выше следует, что при соотношении параметров viewport / viewBox < 1 происходит уменьшение изображения относительно окна браузера.

В примере: 300 / 2700 = 1/9

<svg id="svg1" width="300" height="300" viewBox="200 200 2700 2700">    

То есть изображение будет занимать одну девятую часть от видимого полотна svg (300х300) Так как начало координат у svg - верхний левый угол, то там и будет находиться уменьшенное изображение.

  • Если уменьшать viewBox от 2700 до 300, то есть до размера viewport изображение будет увеличиваться от одной девятой до полного размера.

При этом viewport / viewBox = 1

Анимацию изменения размера viewBox выполняет команда:

<animate  attributeName="viewBox"  begin="svg1.click+0.25s" values="200 200 2700 2700;0 0 300 300" dur="1.5s" fill="freeze"  restart="whenNotActive" /> 

Ниже пример кода целиком.

Для начала анимации кликните в любом месте прямоугольника.

body {
padding:0;
margin:0;
}
svg text {
fill:white;
}
<svg id="svg1" width="300" height="300" viewBox="200 200 2700 2700" style="border:1px solid grey;">

<rect id="R1" x="0" y="0" width="100" height="100" fill="#5A9C6E" /> 
<rect id="R2" x="100" y="0" width="100" height="100" fill="#A8BF5A" />
<rect id="R3" x="200" y="0" width="100" height="100" fill="#FAC46E" />

<rect id="R4" x="0" y="100" width="100" height="100" fill="greenyellow" />
<rect id="R5" x="100" y="100" width="100" height="100" fill="#5A9C6E" />
<rect id="R6" x="200" y="100" width="100" height="100" fill="skyblue" />

<rect id="R7" x="0" y="200" width="100" height="100" fill="#FAC46E" />
<rect id="R8" x="100" y="200" width="100" height="100" fill="yellow" />
<rect id="R9" x="200" y="200" width="100" height="100" fill="#5A9C6E" />

<text x="35" y="55" font-size="24" > R1 </text>
<text x="135" y="55" font-size="24" > R2 </text>
<text x="235" y="55" font-size="24" > R3</text>

<text x="35" y="155" font-size="24" style="fill:grey;" > R4 </text>
<text x="135" y="155" font-size="24" > R5 </text>
<text x="235" y="155" font-size="24" > R6 </text> 

<text x="35" y="255" font-size="24" > R7 </text>
<text x="135" y="255" font-size="24" style="fill:grey;" > R8 </text>
<text x="235" y="255" font-size="24" > R9 </text> 


<animate  attributeName="viewBox"  begin="svg1.click+0.25s" values="200 200 2700 2700;0 0 300 300" dur="1.5s" fill="freeze"  restart="whenNotActive" />
 </svg>

2. Пример использования анимации растровых изображений

Добавим к svg фигурам *.png иконки:

<image xlink:href="img/My-Computer.png"  x="0" y="0" width="100" height="100"  />   

Ниже весь код целиком:

body {
padding:0;
margin:0;
}
svg {
background: linear-gradient(to right, white 33%,  skyblue 90%);
}
svg rect {
fill:none;
stroke:#c3c3c3;
stroke-width:0.5;
}
<svg id="svg1" width="300" height="300" viewBox="200 200 2700 2700" style="border:0px solid grey;">

 <rect id="R1" x="0" y="0" width="100" height="100"  />
<rect id="R2" x="100" y="0" width="100" height="100"  />
<rect id="R3" x="200" y="0" width="100" height="100" fill="#FAC46E" />

<rect id="R4" x="0" y="100" width="100" height="100" fill="greenyellow" />
<rect id="R5" x="100" y="100" width="100" height="100" fill="#5A9C6E" />
<rect id="R6" x="200" y="100" width="100" height="100" fill="skyblue" />

<rect id="R7" x="0" y="200" width="100" height="100" fill="#FAC46E" />
<rect id="R8" x="100" y="200" width="100" height="100" fill="yellow" />
<rect id="R9" x="200" y="200" width="100" height="100" fill="#5A9C6E" /> 

<image xlink:href="https://i.sstatic.net/81zH5.png"  x="0" y="0" width="100" height="100"  /> 
<image xlink:href="https://i.sstatic.net/g835v.png" x="100" y="0" width="100" height="100"  /> 
<image xlink:href="https://i.sstatic.net/naLsU.png" x="200" y="0" width="100" height="100"  />   

<image xlink:href="https://i.sstatic.net/UgIKN.png"  x="0" y="100" width="100" height="100"  /> 
<image xlink:href="https://i.sstatic.net/Lp3Mv.png" x="100" y="100" width="100" height="100"  /> 
<image xlink:href="https://i.sstatic.net/NyyyT.png" x="200" y="100" width="100" height="100"  />    

<image xlink:href="https://i.sstatic.net/VQHVg.png"  x="0" y="200" width="100" height="100"  /> 
<image xlink:href="https://i.sstatic.net/A0G0r.png" x="100" y="200" width="100" height="100"  /> 
<image xlink:href="https://i.sstatic.net/VomF9.png" x="200" y="200" width="100" height="100"  />   

<animate  attributeName="viewBox"  begin="svg1.click+0.25s" values="200 200 2700 2700;0 0 300 300" dur="1.5s" fill="freeze"  restart="whenNotActive" />
 </svg>

1
  • Всё отлично, но не хватает объяснений насчёт отрицательных min-x и min-y во viewBox, к примеру viewBox="-1 -1 2 2". Как при этом рассчитывать расположение элементов внутри и если эти первые два параметра отрицательные, то как это влияет на начало координат?
    – Bharatha
    Commented 4 июл. 2020 в 21:01

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.