我正在尝试仅使用单个 svg 制作非常轻的 SVG 星级组件。
我有一个 5 颗星的形状,我用水平渐变填充它们。
在这里,运行代码片段:
<svg width="68" height="11" viewBox="0 0 68 11">
<linearGradient id="grad">
<stop offset="70%" stop-color="tomato"/>
<stop offset="70%" stop-color="grey"/>
</linearGradient>
<g fill="url(#grad)">
<path d="M6 8.84L9.708 11l-.984-4.07L12 4.192l-4.314-.354L6 0 4.314 3.838 0 4.192 3.276 6.93 2.292 11zM20 8.84L23.708 11l-.984-4.07L26 4.192l-4.314-.354L20 0l-1.686 3.838L14 4.192l3.276 2.738-.984 4.07zM34 8.84L37.708 11l-.984-4.07L40 4.192l-4.314-.354L34 0l-1.686 3.838L28 4.192l3.276 2.738-.984 4.07zM48 8.84L51.708 11l-.984-4.07L54 4.192l-4.314-.354L48 0l-1.686 3.838L42 4.192l3.276 2.738-.984 4.07zM62 8.84L65.708 11l-.984-4.07L68 4.192l-4.314-.354L62 0l-1.686 3.838L56 4.192l3.276 2.738-.984 4.07z"/>
</g>
</svg>
评级可以是十进制(不仅是“全”星和“半星”),甚至可以是类似于 3.35
的值。
问题是 - 我不知道如何动态定义 offset="70%"
。
- 有什么方法可以将百分比传递给 SVG 吗? (例如,我可以使用
currentColor
从 CSS 传递颜色) - 是否有某种方法可以应用线性渐变而不必通过
url(#id)
引用它?我想避免为每个评级生成唯一的 ID,每页可能有数百个。 - 或者也许有某种方法可以通过 CSS 填充 X% 的水平空间?
最佳答案
您可以使用 SVG 作为背景,并且可以轻松控制大小:
.rating {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="68" height="11" viewBox="0 0 68 11"><path fill="grey" d="M6 8.84L9.708 11l-.984-4.07L12 4.192l-4.314-.354L6 0 4.314 3.838 0 4.192 3.276 6.93 2.292 11zM20 8.84L23.708 11l-.984-4.07L26 4.192l-4.314-.354L20 0l-1.686 3.838L14 4.192l3.276 2.738-.984 4.07zM34 8.84L37.708 11l-.984-4.07L40 4.192l-4.314-.354L34 0l-1.686 3.838L28 4.192l3.276 2.738-.984 4.07zM48 8.84L51.708 11l-.984-4.07L54 4.192l-4.314-.354L48 0l-1.686 3.838L42 4.192l3.276 2.738-.984 4.07zM62 8.84L65.708 11l-.984-4.07L68 4.192l-4.314-.354L62 0l-1.686 3.838L56 4.192l3.276 2.738-.984 4.07z"/></svg>');
width: 68px;
height: 11px;
}
.rating:before {
content: "";
display: block;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="68" height="11" viewBox="0 0 68 11"><path fill="tomato" d="M6 8.84L9.708 11l-.984-4.07L12 4.192l-4.314-.354L6 0 4.314 3.838 0 4.192 3.276 6.93 2.292 11zM20 8.84L23.708 11l-.984-4.07L26 4.192l-4.314-.354L20 0l-1.686 3.838L14 4.192l3.276 2.738-.984 4.07zM34 8.84L37.708 11l-.984-4.07L40 4.192l-4.314-.354L34 0l-1.686 3.838L28 4.192l3.276 2.738-.984 4.07zM48 8.84L51.708 11l-.984-4.07L54 4.192l-4.314-.354L48 0l-1.686 3.838L42 4.192l3.276 2.738-.984 4.07zM62 8.84L65.708 11l-.984-4.07L68 4.192l-4.314-.354L62 0l-1.686 3.838L56 4.192l3.276 2.738-.984 4.07z"/></svg>');
height: 100%;
width: var(--p, 50%);
}
<div class="rating"></div>
<div class="rating" style="--p:20%"></div>
<div class="rating" style="--p:80%"></div>
<div class="rating" style="--p:100%"></div>
为了获得更好的支持,您可以用经典 CSS 替换 CSS 变量:
.rating {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="68" height="11" viewBox="0 0 68 11"><path fill="grey" d="M6 8.84L9.708 11l-.984-4.07L12 4.192l-4.314-.354L6 0 4.314 3.838 0 4.192 3.276 6.93 2.292 11zM20 8.84L23.708 11l-.984-4.07L26 4.192l-4.314-.354L20 0l-1.686 3.838L14 4.192l3.276 2.738-.984 4.07zM34 8.84L37.708 11l-.984-4.07L40 4.192l-4.314-.354L34 0l-1.686 3.838L28 4.192l3.276 2.738-.984 4.07zM48 8.84L51.708 11l-.984-4.07L54 4.192l-4.314-.354L48 0l-1.686 3.838L42 4.192l3.276 2.738-.984 4.07zM62 8.84L65.708 11l-.984-4.07L68 4.192l-4.314-.354L62 0l-1.686 3.838L56 4.192l3.276 2.738-.984 4.07z"/></svg>');
width: 68px;
height: 11px;
}
.rating > div {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="68" height="11" viewBox="0 0 68 11"><path fill="tomato" d="M6 8.84L9.708 11l-.984-4.07L12 4.192l-4.314-.354L6 0 4.314 3.838 0 4.192 3.276 6.93 2.292 11zM20 8.84L23.708 11l-.984-4.07L26 4.192l-4.314-.354L20 0l-1.686 3.838L14 4.192l3.276 2.738-.984 4.07zM34 8.84L37.708 11l-.984-4.07L40 4.192l-4.314-.354L34 0l-1.686 3.838L28 4.192l3.276 2.738-.984 4.07zM48 8.84L51.708 11l-.984-4.07L54 4.192l-4.314-.354L48 0l-1.686 3.838L42 4.192l3.276 2.738-.984 4.07zM62 8.84L65.708 11l-.984-4.07L68 4.192l-4.314-.354L62 0l-1.686 3.838L56 4.192l3.276 2.738-.984 4.07z"/></svg>');
height: 100%;
width:50%;
}
<div class="rating"></div>
<div class="rating" ><div style="width:20%"></div></div>
<div class="rating" ><div style="width:80%"></div></div>
<div class="rating" ><div style="width:100%"></div></div>
关于html - 将变量从 CSS 或 HTML 传递到内联 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52874362/