主页 / coding / 问题 / 79288384
Accepted
Shtole
Asked: 2024-12-17 23:04:15 +0800 CST

将描边渐变定义从 SVG 移至 CSS [重复]

  • 772

有一个渐变，定义如下：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="out-of-flow">
    <defs>
        <!-- Gradients for circle charts. -->
        <linearGradient id="circle-graph-blue-greenish-gradient">
            <stop offset="0" stop-color="#00d5bd" />
            <stop offset="100" stop-color="#24c1ed" />
        </linearGradient>
    </defs>
</svg>

它在 CSS 类中引用，并应用于<path>另一个类<svg>：

.circle-graph-blue-greenish {
  stroke: url(#circle-graph-blue-greenish-gradient);
  stroke-width: 5;
  fill: transparent;
  stroke-linecap: round;
  stroke-linejoin: round;
}

svg {
  height: 50vh;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="out-of-flow">
    <defs>
        <!-- Gradients for circle charts. -->
        <linearGradient id="circle-graph-blue-greenish-gradient">
            <stop offset="0" stop-color="#00d5bd" />
            <stop offset="100" stop-color="#24c1ed" />
        </linearGradient>
    </defs>
</svg>

<svg class="rotate-90" width="75%" viewBox="0 0 100 100">
    <path class="circle-graph-underlay" d="M5,50 A45,45,0 1 1 95,50 A45,45,0 1 1 5,50"></path>
    <path d="M5,50 A45,45,0 1 1 95,50 A45,45,0 1 1 5,50" class="circle-graph circle-graph-blue-greenish"
        style="stroke-dashoffset: 251.677;stroke-dasharray: 282.783;"></path>
</svg>

它完美地工作了。我想将渐变定义移到 CSS 类中：

.circle-graph-blue-greenish
{
    stroke: linear-gradient(0deg, rgba(0,213,189,1) 0%, rgba(36,193,237,1) 100%);
    stroke-width: 5;
    fill: transparent;
    stroke-linecap: round;
    stroke-linejoin: round;
}

但不幸的是，它已经停止工作了（没有明显的冲程）。

为什么这两个定义不等效以及如何stroke在 CSS 中定义渐变？

UPD看来我可以移动颜色值：

<stop offset="0" stop-color="var(--circle-graph-blue-greenish-gradient-color-1)" />

总比没有好。

UPD 2不幸的是，这里的答案不能令我满意。

似乎不可能使用这样的变量：

.circle-graph-blue-greenish
{
    /*stroke: url(#circle-graph-blue-greenish-gradient);*/
    --color1: blue;
    --color2: red;
    stroke: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3ClinearGradient id='gradient'%3E%3Cstop offset='0' stop-color='var(--color1)' /%3E%3Cstop offset='1' stop-color='var(--color2)' /%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E#gradient");
    stroke-width: 5;
    fill: transparent;
    stroke-linecap: round;
    stroke-linejoin: round;
}

使用重复的值违反了 DRY 并且（特别是在引号字符串内）很容易被忽视。

html

1 个回答

  1. Best Answer

    很想用 CSS 完成所有事情。虽然没有得到圆角的线条，但代码却整洁多了。

    .pie {
  --my-grey: #333333f4;
  --my-cyan: #00d5bd;
  --my-blue: #0072d5;
  width: 200px;
  aspect-ratio: 1;
  border-radius: 50%;

  background-image:
    /* top layer masks the centre - can change this to solid black */
    radial-gradient(circle, var(--my-grey) 60%, transparent 60%),
    /* centre layer is the colourful edge */
    conic-gradient(transparent 75%, var(--my-blue) 75%, var(--my-cyan) 90%, transparent 90%),
    /* bottom layer is the black foundation */
    radial-gradient(circle, black 65%, transparent 65%);
}
    <div class="pie"></div>

    • 2

相关问题