在SVG之上具有真实图像

我正在研究代表农民领域的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>

更新

相关内容

最新更新

热门标签：