调整线性渐变路径 HTML/CSS 的宽度答案

【问题标题】：Adjust Width of linear gradient path HTML/CSS调整线性渐变路径 HTML/CSS 的宽度
【发布时间】：2018-12-02 08:40:09
【问题描述】：

我正在尝试转换从此 CodePen 获得的以下路径：https://codepen.io/ainalem/pen/EQXjOR

将其宽度加倍。我的意思是我的输入表单是示例中输入表单宽度的两倍，我需要我的路径来适应这个，但是，我对此没有什么经验，我不知道如何继续。

<svg viewBox="0 0 320 300">
                <defs>
                    <linearGradient
                            inkscape:collect="always"
                            id="linearGradient"
                            x1="13"
                            y1="193.49992"
                            x2="307"
                            y2="193.49992"
                            gradientUnits="userSpaceOnUse">
                        <stop
                                style="stop-color:#ff00ff;"
                                offset="0"
                                id="stop876" />
                        <stop
                                style="stop-color:#5c0931;"
                                offset="1"
                                id="stop878" />
                    </linearGradient>
                </defs>
                <path d="m 40,120.00016 239.99984,-3.2e-4 c 0,0 24.99263,0.79932 25.00016,35.00016 0.008,34.20084 -25.00016,35 -25.00016,35 h -239.99984 c 0,-0.0205 -25,4.01348 -25,38.5 0,34.48652 25,38.5 25,38.5 h 239" />
            </svg>

【问题讨论】：

你试过什么？ the SVG specification 和许多在线教程中清楚地描述了渐变的工作原理。请自行解决这个问题。然后回来再问你是否卡住了。但是我给你一个提示：x1和y1指定渐变的起点，x2和y2指定渐变的终点。
这不是关于x1 和y1，而是关于路径。我已将 239 中的一些更改为 480，这有点帮助，但不知道下一步该做什么。
css transition with linear gradient的可能重复

标签： html css svg

【解决方案1】：

我不清楚你到底想要什么，因为你的路径与你链接到的 codepen 中的路径完全不同。

但如果您只想要一个跨越整个形状的水平渐变，您可以执行以下操作：

<svg viewBox="0 0 320 300">
                <defs>
                    <linearGradient
                            id="linearGradient"
                            x1="0"
                            y1="0"
                            x2="1"
                            y2="0">
                        <stop
                                style="stop-color:#ff00ff;"
                                offset="0"
                                id="stop876" />
                        <stop
                                style="stop-color:#5c0931;"
                                offset="1"
                                id="stop878" />
                    </linearGradient>
                </defs>
                <path d="m 40,120.00016 239.99984,-3.2e-4 c 0,0 24.99263,0.79932 25.00016,35.00016 0.008,34.20084 -25.00016,35 -25.00016,35 h -239.99984 c 0,-0.0205 -25,4.01348 -25,38.5 0,34.48652 25,38.5 25,38.5 h 239"
                      fill="url(#linearGradient)"/>
            </svg>

【讨论】：

我想要的是与链接中完全相同的路径，除了我还有一个文本字段并且每个文本字段都是示例宽度的两倍。