我正在研究表示农民田地的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>

最佳答案

我使用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>

关于javascript - 在svg上显示真实图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47717847/

10-12 13:40