3

Почему в коде ниже pattern не заполняет фон?

<svg version="1" xmlns="http://www.w3.org/2000/svg" width="150" height="150"
 style="border:1px solid crimson" viewBox='0 0 150 150' preserveAspectRatio='none' >
 <defs>

   <pattern id='pattern' patternUnits='userSpaceOnUse' x='0' y='0' width='150' height='150'>
      <q fill='#85D2FF' fill-opacity='0.7'>
        <rect x="0" y="0" width="10" height="10"/>
        <rect x="10" y="10" width="10" height="10"/>
      </q>
   </pattern>

 </defs>
 <rect x="0" y="0" width="100%" height="100%" style="fill: url(#pattern); stroke: #000000;"/>
</svg>

2
  • там тег q, может по-этому? 27 дек 2019 в 18:22
  • @Alexandr_TT причем тег html5 если тут нет тегов html5 ?
    – Leks
    27 дек 2019 в 20:49

1 ответ 1

4

Две неточности, одну было очень трудно найти групповой тег у вас был q надо g

<svg version="1" xmlns="http://www.w3.org/2000/svg" width="150" height="150"  viewBox="0 0 150 150"
 preserveAspectRatio="none" style="border:1px solid crimson"  >
 <defs>

   <pattern id="pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="150" height="150">
      <g fill="#85D2FF" fill-opacity="0.7">
        <rect x="0" y="0" width="10" height="10"/>
        <rect x="10" y="10" width="10" height="10"/>
      </g>
   </pattern>

 </defs>
 <rect x="0" y="0" width="100%" height="100%" style="fill:url(#pattern); stroke: #000000;"/>
</svg>  

  1. Нужно изменить размеры плитки патерна

    было width="150" height="150" нужно width="20" height="20"

<svg version="1" xmlns="http://www.w3.org/2000/svg" width="150" height="150"  viewBox="0 0 150 150"
 preserveAspectRatio="none" style="border:1px solid crimson"  >
 <defs>

   <pattern id="pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
      <g fill="#85D2FF" fill-opacity="0.7">
        <rect x="0" y="0" width="10" height="10"/>
        <rect x="10" y="10" width="10" height="10"/>
      </g>
   </pattern>

 </defs>
 <rect x="0" y="0" width="100%" height="100%" style="fill:url(#pattern); stroke: #000000;"/>
</svg>  

Поясняющий рисунок:

введите сюда описание изображения

Подробнее о pattern здесь и здесь

Красивые примеры анимации патернов

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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