Фигура png: геометрические фигуры PNG изображения с прозрачным фоном

javascript — Как сверстать картинку в шестиугольнике и текст в svg фигуре?

Вопрос задан 3 года 3 месяца назад

Изменён 3 года 3 месяца назад

Просмотрен 279 раз

Вот так можно сохранить в векторном виде

Нужно сверстать как на этом макете

Как можно такое сверстать с картинкой в шестиугольнике и с текстом?

• javascript
• html
• css
• jquery
• svg

2

Собственно не сложно это

<svg viewBox="0 0 1000 800" xmlns="http://www.w3.org/2000/svg">
<defs>
    <pattern patternUnits="userSpaceOnUse">
      <image xlink:href="https://edem-v-gosti.ru/upload/iblock/e58/92198620. jpg" 
             x="0" y="0"/>
    </pattern>
 </defs>
<path  transform="translate(34,0)" d="M0,400 40,340 110,340 150,400 110,460 40,460 "  fill="url(#ptn)"/>
<path d="M20,400 70,330 920,330 990,400 920,470 70,470z" fill="none" stroke="#000" stroke-width="2"/>
<text x="220" y="370" font-size="40" text-transform="uppercase">Продукция высокого качества</text>
<text font-size="18px">
  <tspan x="220" y="395">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi odit explicabo dolor inventore</tspan>
  <tspan x="220" y="415">perferendis minima cumque reprehenderit iste laborum culpa praesentium suscipit asperiores</tspan>
  <tspan x="220" y="435">necessitatibus aperiam at unde itaque, saepe temporibus quam, accusamus laudantium?</tspan>
  <tspan x="220" y="455">quibusdam minus. Aspernatur, ad nulla iure eveniet ducimus voluptatibus sed</tspan> 
</text>
</svg>

А это по макету

<svg viewBox="0 0 1000 800" xmlns="http://www. w3.org/2000/svg">
<defs>
    <pattern patternUnits="userSpaceOnUse">
      <image xlink:href="https://edem-v-gosti.ru/upload/iblock/e58/92198620.jpg" 
             x="0" y="0"/>
    </pattern>
 </defs>
<path d="M20,400 70,330 920,330 990,400 920,470 70,470z" fill="none" stroke="#000" stroke-width="2"/>
  
<path  transform="translate(0,-200)scale(1.5)" d="M0,400 40,340 110,340 150,400 110,460 40,460 "  fill="url(#ptn)"/>

<text x="260" y="370" font-size="30" text-transform="uppercase">Продукция высокого качества</text>
<text font-size="14px">
  <tspan x="260" y="395">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi odit explicabo dolor inventore</tspan>
  <tspan x="260" y="415">perferendis minima cumque reprehenderit iste laborum culpa praesentium suscipit asperiores</tspan>
  <tspan x="260" y="435">necessitatibus aperiam at unde itaque, saepe temporibus quam, accusamus laudantium?</tspan>
  <tspan x="260" y="455">quibusdam minus.    Aspernatur, ad nulla iure eveniet ducimus voluptatibus sed</tspan> 
</text>
</svg>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

рисунок PNG, векторы, PSD и пнг для бесплатной загрузки

• красная линия держит ребенка мать абстрактная линия день матери рисунок
• фаза луны геометрическая черная фигура
• милая мультяшная фигура животного
• шестиугольник технология геометрическая фигура голубой медицинские высокие технологии
• медуза змея зеленая фигура в греческой мифологии