SVG形状的轮廓和部分填充

Question

SVG形状的轮廓和部分填充

csssvgcss-shapes

17

这里有一个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>

- ttmt

不要为星形中的每个点定义五个多边形顶点，而是应该为实际形状中的每个顶点定义一个。在这种情况下，有十个顶点。同样定义它们，形状将被明确定义，并且描边仅适用于外部。 - liamness

好的，我已经创建了星形和描边，但是我能半填充形状吗？- http://jsfiddle.net/apbuc773/5/ - ttmt

我能建议的是，也许一个渐变可以实现你想要的效果？ - liamness

3个回答

16

这是一个例子：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">

如果您不想更改多边形的点，请将此多边形应用两次：一次带有描边，一次没有。

- Tolokoban

5

你可以在渐变中省略第一个和最后一个停止点。 - Waruyama

3

我注意到接受答案的评论，以下是如何填充自定义形状的方法：

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

- David Lee

这对于使用<path> vs. <polygon>的人非常有用。相关的MDN文档：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath - KhalilRavanna

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Mullany · Accepted Answer

你还可以使用过滤器来实现这一点。这里是一个可以使填充动画化的示例：

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