SVG元素的CSS背景[重复]答案

【问题标题】：CSS background to an SVG element [duplicate]SVG元素的CSS背景[重复]
【发布时间】：2019-10-18 23:18:10
【问题描述】：

我正在尝试创建一个具有内联 SVG 的 HTML，该内联 SVG 具有一个带有 CSS 背景的元素：

<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 不显示背景这是为什么呢？
我最终想要实现的是将精灵图像作为 SVG 中多个图像的背景

编辑：最终我希望填充是一张大图像，而不仅仅是red。看来仅使用 fill 是不可能的

【问题讨论】：

请使用所有相关代码更新您的问题。目前您的问题无法回答，因为不清楚所需的输出是什么，以及是什么阻止它按照您的要求显示。
style="fill: red"似乎更适合rect。对于 div，样式不会做任何事情，因为 red 不是样式属性，而是颜色。

标签： html css svg

【解决方案1】：

您必须始终为 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>

【讨论】：

【解决方案2】：

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常用的属性：-

剪辑路径、剪辑规则、颜色、颜色插值、颜色渲染、光标、显示、填充、填充不透明度、填充规则、过滤器、蒙版、不透明度、指针事件、形状渲染、描边, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility

【讨论】：