SVG. Задать отступ сверху

264

02 мая 2018, 02:25

Как задать отступ сверху (аналог CSS - margin-top), чтобы изображение смещалось от верха к центру?

<?xml version="1.0" encoding="windows-1252"?> 
    <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --> 
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 290 290" xml:space="preserve" style="enable-background:new 0 0 290 290;"> 
    <g xmlns="http://www.w3.org/2000/svg"> 
	<rect y="220" width="70" height="70" fill="#00aeef"/> 
	<rect y="110" width="70" height="70" fill="#00aeef"/> 
	<rect width="70" height="70" fill="#00aeef"/> 
	<rect x="110" y="220" width="70" height="70" fill="#00aeef"/> 
	<rect x="110" y="110" width="70" height="70" fill="#00aeef"/> 
	<rect x="110" width="70" height="70" fill="#00aeef"/> 
	<rect x="220" y="220" width="70" height="70" fill="#00aeef"/> 
	<rect x="220" y="110" width="70" height="70" fill="#00aeef"/> 
	<rect x="220" width="70" height="70" fill="#00aeef"/> 
    </g> 
    <g> 
    </g> 
    <g> 
    </g> 
    <g> 
    </g> 
    <g> 
    </g> 
    <g> 
    </g> 
    <g> 
    </g> 
    <g> 
    </g> 
    <g> 
    </g> 
    <g> 
    </g> 
    <g> 
    </g> 
    <g> 
    </g> 
    <g> 
    </g> 
    <g> 
    </g> 
    <g> 
    </g> 
    <g> 
    </g> 
    <script xmlns="" type="text/javascript" id="useragent-switcher">navigator.__defineGetter__("userAgent", function() {return "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.9 Safari/537.36"})</script></svg>

Answer 1

Аналогом margin-top в svg является изменение атрибута y-min viewBox="x-min y-min 290 290".
Увеличивая y-min в положительном значении мы может поднимать изображение, уменьшая опускать изображение. В вашем примере svg изображение занимает всё полотно, поэтому нельзя сразу сдвигать изображение сверху-вниз, так как изображение обрежется снизу.

Ниже пример вашего кода из которого я убрал ненужные строчки, которые оставляет Adobe Illustratorи обернул svg код в div, чтобы изменяя его ширину и высоту в процентах менять размер всей svg картинки. Это сделано, чтобы изображение было адаптивно. Красная рамка добавлена, чтобы показать границу svg изображения. Сейчас картинка занимает полностью всё svg полотно.

container { 
   width:100%; 
   height:100%; 
  }

<div class="container">    
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
	 viewBox="0 0 290 290" style="border:1px solid red;" > 
    <g xmlns="http://www.w3.org/2000/svg"> 
	<rect y="220" width="70" height="70" fill="#00aeef"/> 
	<rect y="110" width="70" height="70" fill="#00aeef"/> 
	<rect width="70" height="70" fill="#00aeef"/> 
	<rect x="110" y="220" width="70" height="70" fill="#00aeef"/> 
	<rect x="110" y="110" width="70" height="70" fill="#00aeef"/> 
	<rect x="110" width="70" height="70" fill="#00aeef"/> 
	<rect x="220" y="220" width="70" height="70" fill="#00aeef"/> 
	<rect x="220" y="110" width="70" height="70" fill="#00aeef"/> 
	<rect x="220" width="70" height="70" fill="#00aeef"/> 
    </g> 
     </svg>  
	 </div>

Теперь увеличиваем масштаб viewBox в два раза для уменьшения в два раза изображения svg было - viewBox="0 0 290 290" стало - viewBox="0 0 580 580"

.container { 
   width:100%; 
   height:100%; 
  }

 <div class="container">    
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
	 viewBox="0 0 580 580" style="border:1px solid red;" > 
    <g xmlns="http://www.w3.org/2000/svg"> 
	<rect y="220" width="70" height="70" fill="#00aeef"/> 
	<rect y="110" width="70" height="70" fill="#00aeef"/> 
	<rect width="70" height="70" fill="#00aeef"/> 
	<rect x="110" y="220" width="70" height="70" fill="#00aeef"/> 
	<rect x="110" y="110" width="70" height="70" fill="#00aeef"/> 
	<rect x="110" width="70" height="70" fill="#00aeef"/> 
	<rect x="220" y="220" width="70" height="70" fill="#00aeef"/> 
	<rect x="220" y="110" width="70" height="70" fill="#00aeef"/> 
	<rect x="220" width="70" height="70" fill="#00aeef"/> 
    </g> 
     </svg>  
	 </div>

Теперь сдвигаем весь блок фигур вниз, для этого изменяем параметр y-min=(-145) у viewBox="0 -145 580 580"

.container { 
   width:100%; 
   height:100%; 
  }

 <div class="container">    
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
	 viewBox="0 -145 580 580" style="border:1px solid red;" > 
    <g xmlns="http://www.w3.org/2000/svg"> 
	<rect y="220" width="70" height="70" fill="#00aeef"/> 
	<rect y="110" width="70" height="70" fill="#00aeef"/> 
	<rect width="70" height="70" fill="#00aeef"/> 
	<rect x="110" y="220" width="70" height="70" fill="#00aeef"/> 
	<rect x="110" y="110" width="70" height="70" fill="#00aeef"/> 
	<rect x="110" width="70" height="70" fill="#00aeef"/> 
	<rect x="220" y="220" width="70" height="70" fill="#00aeef"/> 
	<rect x="220" y="110" width="70" height="70" fill="#00aeef"/> 
	<rect x="220" width="70" height="70" fill="#00aeef"/> 
    </g> 
     </svg>  
	 </div>

Можно изменять размеры svg изображения, изменяя проценты контейнера, оставляя изображение адаптивным.

.container { 
   width:10%; 
   height:10%; 
  }

 <div class="container">    
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
	 viewBox="0 -145 580 580" > 
    <g xmlns="http://www.w3.org/2000/svg"> 
	<rect y="220" width="70" height="70" fill="#00aeef"/> 
	<rect y="110" width="70" height="70" fill="#00aeef"/> 
	<rect width="70" height="70" fill="#00aeef"/> 
	<rect x="110" y="220" width="70" height="70" fill="#00aeef"/> 
	<rect x="110" y="110" width="70" height="70" fill="#00aeef"/> 
	<rect x="110" width="70" height="70" fill="#00aeef"/> 
	<rect x="220" y="220" width="70" height="70" fill="#00aeef"/> 
	<rect x="220" y="110" width="70" height="70" fill="#00aeef"/> 
	<rect x="220" width="70" height="70" fill="#00aeef"/> 
    </g> 
     </svg>  
	 </div>

Создание эксклюзивного проекта в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как сделать затемнённое изображение?

215

HTML

Не получается правильно создать форму с помощью двух radio кнопок

Нужно ,чтобы при отправки формы приходил соответствующий ответ"Спросите у пользователя знает ли он PHP с помощью двух radio кнопок

232

HTML

Не работает форма поиска, как найти причину? [требует правки]

Не работает форма поиска, как найти причину? На нажатие мыши форма не реагирует, только при нажатии tab! Как исправить данный баг?

225

HTML

Чего нельзя делать в резиновой верстке?

Я давно делаю резиновые сайты, но когда вопрос доходил до того , что надо скрыть блок на мобильной версии и показать на его месте другой по дизайну...

188