英文:
Why can't I add two variables with calc() CSS?
问题
我正在尝试创建一个圆形进度条，其中变量可以通过内联样式进行控制。进度条将有两个不同的条，它们应该相加在一起，但仍然是不同的颜色。
这些变量单独使用时是有效的：
.card svg circle {
width: 100%;
height: 100%;
fill: none;
stroke: #f0f0f0;
stroke-width: 10;
stroke-linecap: round;
--laresult: calc(625px - (625px * var(--lapercent)) / 34);
--saresult: calc(625px - (625px * var(--sapercent)) / 34);
}
.card svg circle.la {
stroke-dasharray: 625px;
stroke-dashoffset: var(--laresult);
stroke: blue;
}
.card svg circle.sa {
stroke-dasharray: 625px;
stroke-dashoffset: var(--saresult);
stroke: pink;
}
但是，我不希望这两条线重叠，我希望它们看起来像叠加在一起。所以，对于第二个进度条，我想将这两个值相加。然而，当我尝试相加它们时，它就会出错：
.card svg circle {
width: 100%;
height: 100%;
fill: none;
stroke: #f0f0f0;
stroke-width: 10;
stroke-linecap: round;
--laresult: calc(625px - (625px * var(--lapercent)) / 34);
--saresult: calc(625px - (625px * var(--sapercent)) / 34);
}
.card svg circle.la {
stroke-dasharray: 625px;
stroke-dashoffset: var(--laresult);
stroke: blue;
}
.card svg circle.sa {
stroke-dasharray: 625px;
stroke-dashoffset: calc(var(--saresult) + var(--laresult));
stroke: pink;
}
Codepen链接：https://codepen.io/camilapaleno/pen/WNaggpb
英文:
I'm trying to create a circular progress bar where the variables can be controlled with an inline style. The progress bar will have two different bars that should be added together but are still different colors.
These variables work on their own:
.card svg circle {
width: 100%;
height: 100%;
fill: none;
stroke: #f0f0f0;
stroke-width: 10;
stroke-linecap: round;
--laresult: calc(625px - (625px * var(--lapercent)) / 34);
--saresult: calc(625px - (625px * var(--sapercent)) / 34);
}
.card svg circle.la {
stroke-dasharray: 625px;
stroke-dashoffset: var(--laresult);
stroke: blue;
}
.card svg circle.sa {
stroke-dasharray: 625px;
stroke-dashoffset: var(--saresult);
stroke: pink;
}
But I don't want the lines to overlap, I want them to appear like they're stacked. So, For the second progress bar, I'd like to add the two together. However, it breaks when I try to add them:
.card svg circle {
width: 100%;
height: 100%;
fill: none;
stroke: #f0f0f0;
stroke-width: 10;
stroke-linecap: round;
--laresult: calc(625px - (625px * var(--lapercent)) / 34);
--saresult: calc(625px - (625px * var(--sapercent)) / 34);
}
.card svg circle.la {
stroke-dasharray: 625px;
stroke-dashoffset: var(--laresult);
stroke: blue;
}
.card svg circle.sa {
stroke-dasharray: 625px;
stroke-dashoffset: calc(var(--saresult) + var(--laresult));
stroke: pink;
}
答案1
得分: 1
在代码中，我看到HTML中的变量在每个元素中都有定义。问题在于，需要使用这两个变量的元素无法“看到”另一个变量的值，因为它在作用域之外（--laresult 无法计算，因为未定义 --lapercent）。在检查器中可见，它是未定义的。
如果你在父元素中这样定义变量...
<svg style="--lapercent: 12; --sapercent: 5">
<circle cx="105" cy="105" r="100"></circle>
<circle class="la" cx="105" cy="105" r="100"></circle>
<circle class="sa" cx="105" cy="105" r="100"></circle>
</svg>
...则变量会被视为已定义。
英文:
Seeing the HTML in the codepen I see the variables are defined in each element:
<svg>
<circle cx="105" cy="105" r="100"></circle>
<circle class="la" cx="105" cy="105" r="100" style="--lapercent: 12"></circle>
<circle class="sa" cx="105" cy="105" r="100" style="--sapercent: 5"></circle>
</svg>
The problem I think is that the element that needs both variables has no way to "see" the value of the other variable because it is outside the scope (--laresult can't be calculated because --lapercent is not defined). In the inspector, it is visible that it is not defined:
If you define the variables in a parent element this way...
<svg style="--lapercent: 12; --sapercent: 5">
<circle cx="105" cy="105" r="100"></circle>
<circle class="la" cx="105" cy="105" r="100" ></circle>
<circle class="sa" cx="105" cy="105" r="100"></circle>
</svg>
... the variable appears as defined:
答案2
得分: 0
我解决了这个问题。有两个问题：
就像Temani Afif所说，添加这两个变量本来就是不正确的。我需要一个新的公式。
--laresult: calc(625px - (625px * var(--lapercent)) / 34);
--saresult: calc((625px - (625px * (var(--sapercent) + var(--lapercent))) / 34));
第二个问题是进度条无法访问第一个变量，因为我只在第一个进度条中内联声明了它。在两个进度条中都声明它们就可以了：
<circle class="sa" cx="105" cy="105" r="100" style="--lapercent: 12; --sapercent: 5"></circle>
<circle class="la" cx="105" cy="105" r="100" style="--lapercent: 12; --sapercent: 5"></circle>
英文:
I figured this out. There were two issues:
Like Temani Afif said, adding the two variables was incorrect anyways. I needed a new formula.
--laresult: calc(625px - (625px * var(--lapercent)) / 34);
--saresult: calc((625px - (625px * (var(--sapercent) + var(--lapercent))) / 34));
The second issue was that progress bar didn't have access to the first variable since I only declared it inline in the first progress bar. Declaring both in both progress bars worked:
<circle class="sa" cx="105" cy="105" r="100" style="--lapercent: 12; --sapercent: 5"></circle>
<circle class="la" cx="105" cy="105" r="100" style="--lapercent: 12; --sapercent: 5"></circle>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论