Наличие реальных изображений поверх SVG

Question

Наличие реальных изображений поверх SVG

1

Я работаю над прямоугольниками svg, которые представляют собой поле фермера. Возможно ли иметь изображение поля на нем, чтобы дать ему истинный смысл и представление. Здесь пример кода одного из прямоугольников

<!DOCTYPE html>
 <html>
 <body>

<svg width="400" height="110">
<rect width="300" height="100" style="fill:green; stroke: black; stroke-width:3;" />
</svg>

</body>
</html>

lloyd 08 дек. 2017, в 17:52

Источник

0

Не уверен, что вы после, но - stackoverflow.com/questions/3796025/…
Paulie_D 08 дек. 2017, в 16:02
0

codepen.io/Paulie-D/pen/eeqOVK
Paulie_D 08 дек. 2017, в 16:06

Теги:

javascript

css

svg

1 ответ

Ещё вопросы

Не уверен, что вы после, но - stackoverflow.com/questions/3796025/…

Alexandr_T · Answer 1 · 2017-12-08T15-20-00.000Z

Я использовал clipPath для вырезания и размещения изображения в прямоугольнике.

<svg width="600" height="200" viewBox="0 0 600 200" > 
<defs>
<clipPath id="field">
 <rect x="25" y="5" width="550" height="190" rx="25" ry="25" style="fill:none; stroke: black; stroke-width:1;" />
 </clipPath>
</defs>
<image xlink:href=" https://i.stack.imgur.com/MJkK0.jpg" width="600" height="200" clip-path="url(#field)" />
</svg>

Если вы хотите использовать другую рамку вместо прямоугольника, например круг, то это будет легко сделать, заменив прямоугольник на круг в clipPath.

Вариант, предложенный Paulie_D, но ему нужно немного уточнить

Если вам нужна рамка вокруг изображения, вам нужно будет добавить второй прозрачный прямоугольник с рамкой

<rect width="300" height="100" style="fill:none; stroke: black; stroke-width:3;"/>

<svg width="400" height="110"> 

<defs>
  <pattern id="field" patternUnits="userSpaceOnUse" width="300" height="100">
    <image xlink:href=" https://i.stack.imgur.com/MJkK0.jpg" x="-20" y="0" width="350" height="130" />
  </pattern>
</defs>
<rect width="300" height="100"  fill="url(#field)" /> 
<rect width="300" height="100" style="fill:none;  stroke: black; stroke-width:3;" /> 
</svg>

ОБНОВИТЬ

С черной рамкой выглядит мрачно, пусть заменяет ее тень.

Чтобы создать тень, используется фильтр Гаусса, размывая края нижнего прямоугольника

<filter id="filtershadow" width="120%" height="120%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4"/> 
</filter>

<body>  
 <svg width="400" height="110"> 

<defs>

  <filter id="filtershadow" width="120%" height="120%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4"/> 
</filter>
  <pattern id="field" patternUnits="userSpaceOnUse" width="300" height="100">
    <image xlink:href=" https://i.stack.imgur.com/MJkK0.jpg" x="0" y="0" width="350" height="130" />
  </pattern>
</defs>
<rect class="rect-shadow" x="10" y="14" width="290" height="90" filter="url(#filtershadow)" style="fill:black; " /> 
 <rect width="300" height="100"  fill="url(#field)" /> 

</svg>

</body>