4

Вот SVG изображение. В нем я пытаюсь уменьшить ширину

 <polygon id="life" class="green" points="951.3,104.5 930.5,140.5 333,140.5 333,53.5 1515,53.5 1485.5,104.5         "/>

Сниппет:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 1620 376" style="enable-background:new 0 0 1620 376;" xml:space="preserve">
   <style type="text/css">
      .green{fill:green;enable-background:new;}
   </style>
   <polygon id="life" class="green" points="951.3,104.5 930.5,140.5 333,140.5 333,53.5 1515,53.5 1485.5,104.5 		"/>
</svg>

1 ответ 1

5

Из вопроса непонятно, какую ширину вы хотите уменьшить:

  • Уменьшить ширину самой фигуры, но насколько уменьшить не ясно.

  • Уменьшить ширину места, которое занимает svg внутри HTML?

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

Если это второй вариант,- вы не хотите перерисовывать фигуру, но вам надо уменьшить слишком большие отступы от фигуры до краев SVG, то можно воспользоваться следующей техникой:

Вот ваш SVG, красная рамка показывает границы svg документа.
Она добавлена стилями: style="border:1px solid red;"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 1620 376" style="border:1px solid red;">
   <style type="text/css">
      .green{fill:green;enable-background:new;}
   </style>
   <polygon id="life" class="green" points="951.3,104.5 930.5,140.5 333,140.5 333,53.5 1515,53.5 1485.5,104.5 		"/>
</svg>

Видно, что присутствуют очень большие отступы от фигуры до краев svg документа. Какого размера красная рамка, столько места svg займет в HTML. И никакие ухищрения в CSS не помогут уменьшить эти отступы. Уменьшать эти отступы нужно прямо в SVG. Для этого добавим viewport это width height в шапке svg файла. Если вам нужно адаптивное изображение, то ширину и высоту необходимо указывать в процентах.

Для уменьшения отступов меняем соотношение сторон,- делаем высоту в 8 раз меньше

376 /8 = 47px Точно такая же пропорция должна быть
у viewport,- width="100" height="12.5%"

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
   width="100%" height="12.5%" viewBox="0 0 1620 47"  style="border:1px solid red;">
   <style type="text/css">
  .green{fill:green;enable-background:new;}
   </style>
   <g transform="translate(-300 -74)">
   <polygon id="life" class="green" points="951.3,104.5 930.5,140.5 333,140.5 333,53.5 1515,53.5 1485.5,104.5 		"/>
</g>
   </svg>

<g transform="translate(-300 -74)"> используется для более тонкой настройки положения фигуры.

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

<g transform="translate(-300 -80)">
0

Ваш ответ

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

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