2

Почему не отображается паттерн внутри круга?

<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="pattern" viewBox="0 0 1000 1000" width="10%" height="10%">
      <polygon points="569.2,518 396,618 222.8,518 222.8,318 396,218 569.2,318" fill="none" stroke="orange" />
    </pattern>
  </defs>
  
  <circle cx="50"  cy="50" r="50" stroke="black" fill="url(#pattern)" />
</svg>

1 ответ 1

2

Из предыдущего вашего вопроса было видно, что шестиугольник смещён влево 222.8px и вниз - 218px.
C помощью атрибутов min-x, min-y у viewBox="222.8 218 346.4 400", я вернул его назад.

Но из-за этого приходилось смещать и в паттерне и в окружности. В результате сложновато получилось. Решил взять другой шестиугольник без смещения, чтобы не было лишних трудностей и вам будет более понятно решение, без нагромождения лишнего кода

<svg   xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          width="300" height="300" viewBox="0 0 300 300" >
<defs>
    <pattern id="pattern"  width="100" height="100"   patternUnits="userSpaceOnUse">
      <g>    
    <path id="poly" d="M48.9 60.9 16.9 60.9 1.2 33.4 17.1 6.1 48.7 6.2 64.4 33.6z"
        style="fill:none;stroke-width:1;stroke:orange"/>
    </g>    
    </pattern>
  </defs>

    <g transform="scale(4)" >    
    <circle cx="32.9" cy="33.19" r="32"  stroke-width="1" stroke="crimson" fill="url(#pattern)" />
    </g>
    </svg>

Можно ещё код короче написать, без использования pattern

<svg   xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          width="300" height="300" viewBox="0 0 300 300" >
<g transform="scale(4)" >
    <path id="poly" d="M48.9 60.9 16.9 60.9 1.2 33.4 17.1 6.1 48.7 6.2 64.4 33.6z"
        style="fill:none;stroke-width:1;stroke:orange"/>
         
    <circle cx="32.9" cy="33.19" r="32"  stroke-width="1" stroke="crimson" fill="url(#pattern)" />
    </g>
    </svg> 
    
    

Update

комментарий @Voprositel

На самом деле я пытался не вписать шестиугольник в окружность, я составить паттерн из маленьких шестиугольников

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="400" height="387.94" version="1.1">
<style>
.s0{
    fill:none;
    stroke:#000;
}

</style> 
 <defs >
  <pattern id="np"
             x="0" y="0" width="96" height="55.42"
             patternUnits="userSpaceOnUse" >
  <g transform="translate(-0.4 -6.1)">
    <path d="M48.9 60.9 16.9 60.9 0.2 33.4 16.9 6.1 48.9 6.1 64.4 33.4z" style="fill:none;stroke-width:1;stroke:grey"/>
    <path d="M96.4 88.61 64.4 88.61 48.9 60.9 64.4 33.4 96.4 33.4 112.9 60.9z" style="fill:none;stroke-width:1;stroke:grey"/>
 
 </g>
 </pattern>
  </defs>
  
   <circle  cx="50%" cy="50%" r="49%" 
         style="stroke: #000000; fill: url(#np);" /> 
</svg>

1
  • На самом деле я пытался не вписать шестиугольник в окружность, я составить паттерн из маленьких шестиугольников
    – kertAW
    Commented 7 мар. 2021 в 20:18

Ваш ответ

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

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