Início / coding / Perguntas / 79288384
Accepted
Shtole
Asked: 2024-12-17 23:04:15 +0800 CST

Mover definição de gradiente de traço de SVG para CSS [duplicado]

  • 772

Existe um gradiente, definido assim:

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

Ele é referenciado em uma classe CSS, aplicado a uma <path>em outra <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>

Funciona perfeitamente. Quero mover a definição do gradiente para a classe 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;
}

Mas infelizmente parou de funcionar (nenhum traço visível).

Por que ambas as definições não são equivalentes e como defino o gradiente strokeem CSS?

ATUALIZAÇÃO Parece que consigo mover os valores das cores:

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

Melhor que nada.

UPD 2 Infelizmente, a resposta daqui não é satisfatória para mim.

Parece impossível usar variáveis ​​como esta:

.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;
}

Usar um valor duplicado viola o DRY e (especialmente dentro de uma string entre aspas) pode ser fácil de ignorar.

html

1 respostas

  1. Best Answer

    Tentador fazer tudo em CSS. Você não obtém as tampas de linha arredondadas, mas o código é muito mais organizado.

    .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

relate perguntas