Polygon и path (Svg паттерны)

140

26 марта 2021, 11:40

В чем отличие path от polygon?

Какой из них желательно применять в svg паттернах.

Пример:

<div class="path"> 
<svg width="350" height="200"> 
 
<path d="M0,100 100,100 80,80 20,80 20,20 0,0z"  
stroke="orange" stroke-width="2" fill="black" 
transform="translate(65,20)"/> 
 
</svg> 
</div> 
  
 
 
 
<div class="polygon"> 
<svg width="350" height="200"> 
 
<polygon points="0,100 100,100 80,80 20,80 20,20 0,0"  
stroke="orange" stroke-width="2" fill="gray" 
transform="translate(65,20)"/> 
 
</svg> 
</div>

Answer 1

Вот смотрите, верхние фигуры я нарисовал разными примитивами а нижние при помощи path, кроме этого path позволяет рисовать еще много чего, за счет команд атрибута d :

Перемещение: M, m

Линия: L, l, H, h, V, v

Кубическая кривая Безье: C, c, S, s

Квадратичная кривая Безье: Q, q, T, t

Дуга: A, a

Закрыть путь: Z, z

Команды с большой буквы используют абсолютное позиционирование точек, а с маленькой - абсолютное относительно предыдущей точки пути

Подробнее что да как работает в пути можно узнать вот тут

<svg fill="none" stroke="black" viewbox="0 0 250 100" height="100vh"> 
 
  <rect x="10" y="10" width="30" height="20"></rect> 
  <path d="M10,10 h30 v 20 h-30 z"></path> 
   
  <rect x="50" y="10" width="30" height="20" rx="5"></rect> 
  <path d="M50,15a5,5,0,0,1,5,-5h20a5,5,0,0,1,5,5v10a5,5,0,0,1,-5,5h-20a5,5,0,0,1,-5-5z"></path> 
   
  <circle cx="100" cy="20" r="10"></circle> 
  <path d="M90,20a10,10,0,1,1,0,0.0001z"></path> 
   
  <ellipse cx="135" cy="20" rx="15" ry="10"></ellipse> 
  <path d="M120,20a15,10 0 1,0 30,0a15,10 0 1,0 -30,0"></path> 
   
  <polygon points="160 10 180 30 155 15 180 20"></polygon> 
  <path d="M160 10L180 30L155 15 L180 20 z"></path> 
   
  <polyline points="190 10 210 30 185 15 210 20"></polyline> 
  <path d="M190 10L210 30L185 15 L210 20 "></path> 
   
  <line x1="220" y1="10" x2="240" y2="30"></line> 
  <path d="M220 10 L240 30"></path> 
   
  <style> 
    path { 
      transform:translate(0, 40px); 
    } 
  </style> 
<svg>

Answer 2

К примеру и на polygon тоже можно нарисовать круг, но для этого надо пользоваться генераторами типа Illustrator, Corel Draw как и я в этом случае

Но надо не забывать что эти редакторы прежде всего решения для дизайнеров и пользоваться надо ими с умом

<div style="width:400px; margin:auto;"> 
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30000 30000" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 <g > 
  <polygon fill="none" stroke-width="100px" stroke="red" points="15355.6,2418.53 14297.52,2501.44 13239.42,2584.35 12210.18,2830.83 11180.96,3077.31 10208.65,3480.61 9236.36,3883.93 8347.52,4433.09 7458.69,4982.24 6677.55,5662.24 5896.42,6342.26 5244.3,7134.58 4592.18,7926.9 4086.85,8809.93 3581.53,9692.94 3236.79,10642.57 2892.05,11592.21 2717.3,12582.54 2542.54,13572.88 2542.54,14576.92 2542.54,15580.94 2717.29,16571.28 2892.05,17561.62 3236.79,18511.25 3581.53,19460.88 4086.85,20343.9 4592.18,21226.91 5244.29,22019.24 5896.41,22811.56 6677.55,23491.57 7458.68,24171.59 8347.52,24720.75 9236.35,25269.9 10208.65,25673.2 11180.94,26076.52 12210.17,26323 13239.41,26569.48 14297.5,26652.39 15355.6,26735.3 16413.68,26652.39 17471.78,26569.48 18501.02,26323 19530.24,26076.52 20502.55,25673.22 21474.84,25269.9 22363.68,24720.75 23252.51,24171.59 24033.65,23491.59 24814.78,22811.57 25466.9,22019.25 26119.02,21226.93 26624.35,20343.9 27129.67,19460.89 27474.41,18511.26 27819.15,17561.62 27993.9,16571.29 28168.66,15580.95 28168.66,14576.92 28168.66,13572.89 27993.91,12582.55 27819.15,11592.21 27474.41,10642.58 27129.67,9692.95 26624.35,8809.93 26119.02,7926.92 25466.91,7134.59 24814.79,6342.27 24033.65,5662.26 23252.53,4982.24 22363.68,4433.09 21474.85,3883.93 20502.55,3480.63 19530.26,3077.31 18501.03,2830.83 17471.79,2584.35 16413.7,2501.44 "/> 
 </g> 
</svg> 
</div>

Answer 3

svg{ 
  display: block; 
  width: 300px; 
  margin: 20px auto; 
}

<svg width="300" height="300" viewbox="0 0 5 5" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"> 
     <defs> 
       <clipPath id="clip"> 
          <path d="M0.1,1.5  2.5,0.1  4.9,1.5  4.9,3.5  2.5,4.9  0.1,3.5z" /> 
       </clipPath> 
    </defs> 
  <g> 
   <path d="M0.1,1.5  2.5,0.1  4.9,1.5  4.9,3.5  2.5,4.9  0.1,3.5z" stroke="#ccc" stroke-width="0.2" stroke-linejoin="round"/> 
   <image xlink:href="https://pp.userapi.com/c637222/v637222085/2aa06/2hO_8t4jw0A.jpg" width="4.9" height="4.9" x="0.1" y="0.1" clip-path="url(#clip)" /> 
  </g> 
</svg> 
 
<hr> 
 
<svg width="300" height="300" viewbox="0 0 5 5" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"> 
     <defs> 
       <clipPath id="clip1"> 
         <path d="M0.1,4.9 4.9,4.9 2.5,0.1z" /> 
       </clipPath> 
    </defs> 
    <path d="M0.1,4.9  4.9,4.9  2.5,0.1z" fill="none" stroke="#ccc" stroke-width="0.2" stroke-linejoin="round"/> 
     <image xlink:href="https://pp.userapi.com/c637222/v637222085/2aa06/2hO_8t4jw0A.jpg" width="4.9" height="4.9" x="0.1" y="0.1" clip-path="url(#clip1)" /> 
</svg>

Answer 4

Вот маленький пример того что можно не имея навыков программирования и не зная ни какой ЯП сделать вот такую ничтожную анимацию использую только(!) SVG

<svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
  <defs> 
    <linearGradient id="lg"> 
      <stop offset="0%" stop-color="gold"/> 
      <stop offset="100%" stop-color="teal"/> 
    </linearGradient> 
  </defs> 
    <g> 
      <path d="M0,0 20,0 20,10 0,10z" fill="url(#lg)" opacity="0"> 
        <animate  
                 id="linear" 
                 attributeName="opacity" 
                 from="0" to="1" 
                 dur="0.34s"  
                 begin="end.end"  
                 fill="freeze" repeatCount="1"/> 
      </path> 
    </g> 
   <g> 
     <text style="font-size: 1.5px; font-weight:900;" x="4.5" y="-1"> 
       Hello 
        <animate  
          id="text" 
          attributeName="y" 
          from="-1" 
          to="4" 
          repeatCount="1" 
          dur="1s" 
          begin="shape.end" 
          fill="freeze"  />   
        <animate  
          id="t1" 
          attributeName="fill" 
          from="#000" 
          to="#fff" 
          repeatCount="1" 
          dur="1s" 
          begin="linear.end" 
          fill="freeze"  />   
     </text>    
  </g> 
   
     <g> 
     <text style="font-size: 1.5px; font-weight:900;" x="30" y="4"> 
       Everybody 
        <animate  
          id="end" 
          attributeName="x" 
          from="30" 
          to="8.5" 
          repeatCount="1" 
          dur="1s" 
          begin="text.end" 
          fill="freeze"  />  
          <animate  
          id="" 
          attributeName="fill" 
          from="#000" 
          to="#fff" 
          repeatCount="1" 
          dur="1s" 
          begin="t1.end" 
          fill="freeze"  />  
     </text>    
  </g> 
   
  <g style="display: ;"> 
    <path d="M0,0  20,0  20,10  0,10  0,0z" fill="lightgreen" stroke="none"> 
      <animate  
        id="shape" 
        attributeName="d" 
        values="M0,0  3,0  20,10  0,10  0,0z; 
                M0,0  3,7.5  20,10  0,10  0,0z" 
        repeatCount="1" 
        dur="1s" 
        begin="btn.click" 
        fill="freeze"     
      /> 
    </path> 
  </g> 
   
  <g style="cursor: pointer;" id="btn"> 
   <rect width="3" height="1.5" x="8" y="7" fill="lightblue" rx="0.2" /> 
    <text style="user-select: none; font-size:0.8px; fill:#fff;" x="8.5" y="8"> button</text> 
  </g> 
   
</svg>

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

Все вопросы

ТОП-10

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

Polygon и path (Svg паттерны)

Как выровнять grid-блок по ширине размера окна?

Обобщённый Query в Mediatr

Чтение json и добавление в базу данных mssql

Множественное использование count в Linq C#