将变量从CSS或HTML传递到嵌入式SVG [英] Pass variable from CSS or HTML to inline SVG

问题描述

我正在尝试仅使用单个svg来制作非常轻的SVG星级组件.

I'm trying to make very light SVG star rating component using only single svg.

我有一个5星的形状，正在用水平渐变填充它们.

I have a shape with 5 stars and I'm filling them with horizontal gradient.

在这里，运行代码片段:

Here it is, run code snippet:

<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之类的东西.

The rating can be decimal (not only "full" star and "half-star"), it can even be something like 3.35.

问题是-我不知道如何动态定义offset="70%".

The issue is - I do not know how do define offset="70%" dynamically.

• 是否可以通过某种方式将百分比传递给SVG? (例如，我可以使用currentColor从CSS传递颜色)
• 是否有某种方法可以应用线性渐变而不必被url(#id)引用?我想避免为每个评分生成唯一的ID，每页可能有数百个.
• 或者也许有某种方法可以仅通过CSS填充X％的水平空间?

• Is there some way to pass percentage to SVG? (for example I can use currentColor to pass color from CSS)
• Is there some way to apply linear gradient without having to reference it by url(#id)? I want to avoid generating unique ID for each rating, there can be hundreds per page.
• Or perhaps there is some way to fill X% of horizontal space just via CSS?

推荐答案

您可以将SVG用作背景，并且可以轻松控制大小:

You can use your SVG as a background and you will be able to easily control the size:

.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:

For better support you can replace CSS variable with classic 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>

这篇关于将变量从CSS或HTML传递到嵌入式SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！