Задать вопрос
LenovoId
@LenovoId
svg, css,js
svg

Как в размеченную область svg поместить на фон изображение?

<html lang="ru">
<body>
   <svg width="1200px" height="260px"> 
       <pattern id="img1" patternUnits="userSpaceOnUse" width="1200" height="260">
        <image xlink:href="00080028.jpg" x="0" y="0" width="1200" height="260" />
      </pattern> 
       <polygon 
         points="40 200,40 40, 1160 40,1160 200, 580 250, " 
         style="fill:#img1; fill-opacity:0.5; stroke: black;" />
   </svg>
</body>
</html>

Этот самый патерн не работает

codepen.io/Geyan/pen/MeJQRP?editors=110 это пример работы , вот это серое поле надо сделать фоном , точнее на фон поставить изображение как здесь

Может кому то пригодится :

<!DOCTYPE HTML>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="900px" height="300px">
	
      <pattern id="img1" patternUnits="userSpaceOnUse" width="900" height="300">
        <image xlink:href="pic.jpg" x="0" y="0" width="900" height="300" />
      </pattern>
     
	    <polygon 
         points="40 200, 
		         40 40, 
				 860 40,
				 860 200,
				 430 250,
				 " 
         style="fill:url(#img1)"/>
	</svg>
</body>
</html>


Ответ верен
Вот что в итоге получится :
1db2aaf1e46a4c6c9239ec2da0114a7d.png
  • Вопрос задан
  • 638 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
HamSter007
@HamSter007
HTML/CSS верстальщик
Могу предложить свой пример

Либо посоветовать:

Сохрани svg в файл с расширением .svg
И ставь его на фон через background: url(... .svg) center no-repeat;

* 
<svg width="1200px" height="260px" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"> 
     <defs>
       <pattern id="img1" patternUnits="userSpaceOnUse" width="1200" height="260">
        <image xlink:href="http://cdn.wall-pix.net/albums/people-models/00030952.Sao.Paulo.Indy.300.jpg" x="0" y="0" width="1200" height="260" />
      </pattern> 
       </defs>
       <polygon 
         points="40 200,40 40, 1160 40,1160 200, 580 250, " 
         style="fill:#img1; fill-opacity:0.5; stroke: black;" />
   </svg>
<---- Это переносишь в файл и сохраняешь его в .svg
Ответ написан
4 комментария
4 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Motion Designer (Моушн-дизайнер)
BELT
от 65 000 ₽
Flutter Developer MIDDLE
BELT
от 70 000 ₽
PHP-разработчик (middle backend php developer)
ООО "М+1" • Новосибирск
от 120 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Верстка Flutter + API
21 нояб. 2024, в 22:21
3000 руб./в час
Разработать Custom Speech-to-text Operator на Apache Flink
21 нояб. 2024, в 21:42
100000 руб./за проект
Сделать видио поздравления с субтитрами
21 нояб. 2024, в 21:30
500 руб./за проект
Ещё заказы