CSS 中 SVG 渐变
本问题涉及为 SVG 的
fill 属性的使用
当前,您正在使用 fill 属性为
使用渐变
要应用线性渐变,您需要使用 url() 函数引用在 SVG 中定义的渐变定义。在 CSS 中,语法如下:
fill: url(#gradient-id);
其中 #gradient-id 是您在 SVG 中为渐变定义的 ID。
示例
以下代码展示了如何为
CSS
rect { cursor: pointer; shape-rendering: crispEdges; fill: url(#MyGradient); }
SVG
<svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg"> <style type="text/css"> rect { fill: url(#MyGradient); } </style> <defs> <linearGradient id="MyGradient"> <stop offset="5%" stop-color="#F60" /> <stop offset="95%" stop-color="#FF6" /> </linearGradient> </defs> <rect width="100" height="50" /> </svg>
这将创建一个从红色(#F60)到橙色(#FF6)的水平渐变,应用于
以上是如何在 CSS 中将渐变应用于 SVG 矩形?的详细内容。更多信息请关注PHP中文网其他相关文章!