用后续计算累积填充 svg答案

【问题标题】：Fill up svg cumulatively with subsequent calculations用后续计算累积填充 svg
【发布时间】：2019-12-29 23:54:29
【问题描述】：

我正在尝试通过添加新计算的商来填充我的 svg（累积）。

这是我的 HTML 的一部分：

<div style='text-align:center;'>
    <svg width="100%" viewbox="0 0 30 42">
        <linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
            <stop stop-color="#61A4FF" offset="0%" id="progress"/>
            <stop stop-color="#FFFFFF" offset="0%" id="F1gst2"/>
            <!-- <stop offset="0%" stop-opacity="1" stop-color="#61A4FF"/>
                <animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s" begin="0s"/>
            </stop>
            <stop offset="40%" stop-opacity="0" stop-color="#61A4FF">
                <animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s"  begin="0s"/>
            </stop> -->
        </linearGradient>
        <path id='tear' fill="url(#lg)" stroke="black" stroke-width="1.0"
            d=" M  15 3
                Q  16.5 6.8 25 18
                A  12.8 12.8 0 1 1 5 18
                Q  13.5 6.8 15 3z   " />
    </svg>
</div>

还有我的 JavaScript：

function calculate(){
  var numerator = document.getElementById('progressInput').value;
  var denominator = document.getElementById('goalInput').value;
  var quotient = parseFloat(numerator)/parseFloat(denominator);
  progressFill.setAttribute('offset', quotient);
};

每当我在输入字段中输入新值时，此代码基本上都会刷新计算。在我第一次计算商时这样做很好，但我希望它累积后续计算（并且基本上累积填充 svg 区域）。这可能吗？

例如，假设我首先将 parseFloat(numerator)/parseFloat(denominator) 计算为 2/10，并且 svg 在第一次单击时填充了 20% 的形状。如果我想在此基础上再增加 40%（因此 parseFloat(numerator)/parseFloat(denominator) 再增加 4/10），我如何将其定义为代码的补充？

我想我可能不得不写一个 if-then 语句，我开始了（但我很确定这是错误的）：

function calculate(){
  var numerator = document.getElementById('progressInput').value;
  var denominator = document.getElementById('goalInput').value;
  var quotient = parseFloat(numerator)/parseFloat(denominator);
  if (document.getElementById('progress').offset="0%") {
    progressFill.setAttribute('offset', quotient);
  };
};

【问题讨论】：

标签： javascript html dom svg

【解决方案1】：

您没有提供progressInput 或goalInput，所以我跳过了这些并使用了一个常量。每次单击按钮时，填充都会更改 10%，但通过查询 DOM 以获取当前填充，然后向其添加 10%。

function calculate(){
  var quotient = 0.1;
  document.getElementById("progress").offset.baseVal += quotient;
};

<div style='text-align:center;'>
<button class="button" class="accumulate" onclick="calculate()">Change</button>

<svg width="100%" viewbox="0 0 30 42">
        <linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
            <stop stop-color="#61A4FF" offset="0%" id="progress"/>
            <stop stop-color="#FFFFFF" offset="0%" id="F1gst2"/>
        </linearGradient>
        <path id='tear' fill="url(#lg)" stroke="black" stroke-width="1.0"
            d=" M  15 3
                Q  16.5 6.8 25 18
                A  12.8 12.8 0 1 1 5 18
                Q  13.5 6.8 15 3z   " />
    </svg>
</div>

【讨论】：

啊，这太完美了。非常感谢！直到现在我才知道 .baseVal。我想我什至不需要 if-then 语句。