我在这里有一个jsfiddle- http://jsfiddle.net/apbuc773/

我想使用svg创建星星。

我想抚摸星星的外面。 在我的示例中,笔画在剖析内部形状的每一行上。

也可以将星形填充一半。

我想将其用于星级评定,但是我需要一半甚至四分之一的填充量。

    <svg height="210" width="500">
      <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:red;stroke:blue;"/>
    </svg>

#1楼 票数:8 已采纳

您也可以使用过滤器执行此操作。 这是一个动画填充:

 <svg height="210" width="500"> <defs> <filter id="fillpartial" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feFlood x="0%" y="0%" width="100%" height="100%" flood-color="red" /> <feOffset dy="0.5"> <animate attributeName="dy" from="1" to=".5" dur="3s" /> </feOffset> <feComposite operator="in" in2="SourceGraphic" /> <feComposite operator="over" in2="SourceGraphic" /> </filter> </defs> <polygon filter="url(#fillpartial)" points="165.000, 185.000, 188.511, 197.361, 184.021, 171.180, 203.042, 152.639, 176.756, 148.820, 165.000, 125.000, 153.244, 148.820, 126.958, 152.639, 145.979, 171.180, 141.489, 197.361, 165.000, 185.000" style="fill:white;stroke:red;" /> </svg> 

#2楼 票数:7

这是一个示例: http : //jsfiddle.net/apbuc773/11/

可以这样使用渐变:

<svg height="210" width="500">
    <defs>
        <linearGradient id="half">
            <stop offset="0%" stop-color="red" />
            <stop offset="50%" stop-color="red" />
            <stop offset="50%" stop-color="white" />
            <stop offset="100%" stop-color="white" />
        </linearGradient>            
    </defs>
    <g fill="url(#half)" stroke="blue" stroke-width="2">

如果您不想更改多边形点,只需两次应用此多边形:一次使用笔划,一次不使用。

#3楼 票数:1

我注意到已接受答案的评论,这是您如何填充自定义形状的方法:

 <svg width="100" height="100" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <clipPath id="heart"> <path d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923 C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379 C99.387,33.883,93.598,19.539,81.495,13.923z"/> </clipPath> </defs> <rect x="0" y="0" fill="rgb(217,217,217)" width="100%" height="100%" clip-path="url(#heart)" /> <rect x="0" y="50%" fill="red" width="100%" height="100%" clip-path="url(#heart)" /> </svg> 

  ask by ttmt translate from so

未解决问题?本站智能推荐:

1回复

用颜色部分填充形状的边框

我正在尝试创建一个进度效果,颜色填充DOM对象的边框(或可能是背景)。 附上的图片可以让你更好地了解我的目标。 我通过在灰线上添加具有纯色背景颜色的对象并设置其高度来实现当前结果。 这个对象有mix-blend-mode: color-burn; 适用于它,这就是它只为它下面的灰色线条着
1回复

带有CSS的SVG形状大小

我试图将图标宽度设置为svg容器的100%。 这是我的问题: 这是SVG图标的代码 谢谢
4回复

用SVG/Canvas/CSS3创建这些形状?

我想创建这个: 最好使用SVG,Canvas或CSS3。 最终,我打算在这些区域上应用4种独立的乘法混合模式。 我也想拉伸这个区域来占据网页的整个高度/宽度。 我能做到这一点在一定程度上这里 ,但它并不适合我。 这用于: 有人可以帮助实现图形中的形状吗?
2回复

只有SVG形状的CSS阴影,而不是整个文档

是否可以仅在SVG形状上获得CSS阴影,而不是整个文档? IE浏览器。 围绕蓝色箭头: a:after { background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .50); -webkit-filter: drop-shadow(5
3回复

在流体宽度的SVG形状上重复图案吗?

我正在尝试在HTML / CSS(跨浏览器兼容回到IE9)中重新创建此布局: 基本上,这是一条跨越视口宽度的对角线,它划分了两个背景图案。 它具有固定的高度,但应动态拉伸到其容器的整个宽度。 我想不出一种使用纯CSS来实现此目的的方法,所以我的下一个想法是使用SVG。 使用纯色并
5回复

使用CSS或SVG创建标签形状

有谁知道如何使此选项卡形状:
2回复

如何在CSS3或SVG或HTML(5)中创建带有文本的形状?

我需要创建一个HTML页面,如下图所示。 我不知道如何创建包含文本的可点击表单。 文本不应该是图像,也不应超过其区域(如溢出:隐藏) 我在HTML中尝试了区域和地图,但是无法将文本放入其中。 请问怎么做? 编辑 : 在阅读了Phrogz的答案后,我尝试了SVG的其他内容,
5回复

动态调整单个形状的大小而不缩放整个SVG

我有一个箭头作为SVG,我想根据包装DIV的宽度改变它的长度(例如)。 我之前的所有尝试都导致了这种行为(扩展整个SVG): 而不是这个,我想实现这种行为: 是否可以通过简单地在代码中添加百分比值来改变SVG内部的单个形状? 如果没有,我怎么能这样做? SVG代码: