主页 / coding / 问题 / 79542869
Accepted
Dem Pilafian
Asked: 2025-03-29 14:26:24 +0800 CST

强制 SVG 填充图案与矩形容器相关

  • 772

对于 SVG<rect>容器，fill用<pattern>标签制作的背景似乎是相对于整体视图开始的。

<pattern>相对于容器来说，最干净的开始方法是什么<rect>？

目标是能够让多个<rect>容器重复使用，<pattern>这样每个容器都从容器的左上角开始渲染相同的背景。下面是一个示例 SVG，其中有两个<rect>容器装满了弹珠。

SVG：

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
   width="400px" height="250px" viewBox="0 0 400 250">
   <defs>
      <pattern id="marbles" width="50" height="50"
         patternUnits="userSpaceOnUse">
         <circle cx="25" cy="25" r="22" fill="plum" stroke="black"/>
      </pattern>
   </defs>
   <rect width="100%" height="100%" fill="teal"/>
   <rect x="10" y="10"  width="150" height="100" fill="url(#marbles)"/>
   <rect x="90" y="120" width="250" height="100" fill="url(#marbles)"/>
</svg>

实际产量：
实际产量

后台fill忽略容器的x和属性。yrect

期望输出：
期望输出

使用代码进行实验：
https://jsfiddle.net/pilafmon/b5edq3go/

svg

1 个回答

  1. Best Answer

    使用变换来定位矩形元素而不是 x 和 y。

    <?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
   width="400px" height="250px" viewBox="0 0 400 250">
   <defs>
      <pattern id="marbles" width="50" height="50"
         patternUnits="userSpaceOnUse">
         <circle cx="25" cy="25" r="22" fill="plum" stroke="black"/>
      </pattern>
   </defs>
   <rect width="100%" height="100%" fill="teal"/>
   <rect transform="translate(10,10)" width="150" height="100" fill="url(#marbles)"/>
   <rect transform="translate(90,120)" width="250" height="100" fill="url(#marbles)"/>
</svg>

    • 3

相关问题