Question

我正在尝试创建一个具有内联SVG且包含CSS背景元素的HTML：

<html>
<body>
<svg>
    <foreignObject width="50" height="50">
        <div style="red; width:50; height:50"></div>
    </foreignObject>
    <rect width="50" height="50" transform="translate(100,0)" style="red"/></svg>
</body>
</html>

显示foreighObject的背景，而不显示rect的背景为什么呢？
我最终想要实现的是将一个sprite图像作为SVG中多个图像的背景

编辑：最终，我希望填充是一张大图像，而不仅仅是red。似乎仅靠fill

是不可能的

Answer 1

style =“ red”看起来不正确，正确的方式是“ fill：red ”或“ fill：＃00562 ”;

<!-- Simple rectangle -->
  <rect width="100" height="100" fill="red"/>

<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple rectangle -->
  <rect width="100" height="100" fill="red"/>
</svg>

供参考 这些是rect通常使用的属性：-

剪切路径，剪切规则，颜色，颜色插值，颜色渲染，光标，显示，填充，填充不透明度，填充规则，过滤器，蒙版，不透明度，指针事件，形状渲染，笔触，笔划-dasharray，笔划-dashoffset，笔划-linecap，笔划-linejoin，笔划-miterlimit，笔划不透明，笔划宽度，变换，矢量效果，可见性

Answer 2

您必须始终对HTML元素和svg元素使用正确的样式标签，然后它才能起作用

<svg>
    <foreignObject x="0" y="0" width="50" height="50">
        <div style="background: red; width:50px; height:50px"></div>
    </foreignObject>
    <rect width="50" height="50" transform="translate(100,0)" style="fill: red"/>
</svg>

SVG元素的CSS背景

2 个答案: