SVG元素的CSS背景[重复]
Posted
技术标签:
【中文标题】SVG元素的CSS背景[重复]【英文标题】：CSS background to an SVG element [duplicate] 【发布时间】：2019-10-18 23:18:10 【问题描述】：我正在尝试创建一个具有内联 SVG 的 html，该内联 SVG 具有一个带有 CSS 背景的元素：
<html>
<body>
<svg>
<foreignObject >
<div style="red; width:50; height:50"></div>
</foreignObject>
<rect transform="translate(100,0)" style="red"/></svg>
</body>
</html>
foreighObject 显示背景，但rect 不显示背景
这是为什么呢？
我最终想要实现的是将精灵图像作为 SVG 中多个图像的背景
编辑：最终我希望填充是一张大图像，而不仅仅是red。看来仅使用 fill 是不可能的
【问题讨论】：
请使用所有相关代码更新您的问题。目前您的问题无法回答，因为不清楚所需的输出是什么，以及是什么阻止它按照您的要求显示。style="fill: red"似乎更适合rect。对于 div，样式不会做任何事情，因为 red 不是样式属性，而是颜色。
【参考方案1】：
您必须始终为 HTML 元素和 svg 元素使用正确的样式标签，然后才能正常工作
<svg>
<foreignObject x="0" y="0" >
<div style="background: red; width:50px; height:50px"></div>
</foreignObject>
<rect transform="translate(100,0)" style="fill: red"/>
</svg>【讨论】：
【参考方案2】：style="red" 看起来不正确，正确的方法是 "fill:red" 或 "fill:#00562";
<!-- Simple rectangle -->
<rect fill="red"/><svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
<!-- Simple rectangle -->
<rect fill="red"/>
</svg>供参考 这些是rect常用的属性：-
剪辑路径、剪辑规则、颜色、颜色插值、颜色渲染、光标、显示、填充、填充不透明度、填充规则、过滤器、蒙版、不透明度、指针事件、形状渲染、描边, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
【讨论】：
以上是关于SVG元素的CSS背景[重复]的主要内容，如果未能解决你的问题，请参考以下文章
从SASS编译时CSS背景网址SVG填充颜色不起作用（不是base64）[重复]
CSS：在一个元素上缩放和旋转多个 SVG 背景图像 - 没有 JS 可能吗？