1

<svg width='400' height='400' style='border: 1px solid black'>
   <pattern id="newpattern"
             x="0" y="0" width="20" height="20"
             patternUnits="userSpaceOnUse" >
               
            <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>
  <circle stroke-width='url(#newpattern)' stroke='blue' fill='green'  r="100" cx="50%" cy="50%" />
</svg>

2
  • pattern это типа background + background-repeat одновременно - что Вы добиваетесь ? 21 фев 2020 в 10:36
  • @ MaximLensky добавил ответ
    – Leks
    21 фев 2020 в 10:40

2 ответа 2

2

stroke - в этом аттрибуте указывают заливку

stroke-width - здесь указывают толщину

<svg width='400' height='400' style='border: 1px solid black'>
   <pattern id="newpattern"
             x="0" y="0" width="20" height="20"
             patternUnits="userSpaceOnUse" >
               
            <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>
  <circle stroke='url(#newpattern)' stroke-width='30' fill='green'  r="100" cx="50%" cy="50%" />
</svg>

2

Хотел добавить в рамку pattern

<svg width='400' height='400' style='border: 1px solid black'>
   <pattern id="newpattern"
             x="0" y="0" width="40" height="40"
             patternUnits="userSpaceOnUse" >
            <g fill="#85D2FF"  fill-opacity="0.7">
             <polygon points="20,30 40,10 60,30" fill='red'/>
            </g>
      </pattern>
  <circle stroke-width='20' stroke='url(#newpattern)' fill='green'  r="100" cx="50%" cy="50%" />
</svg>

Ваш ответ

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

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