Question

我正尝试转换从此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>

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

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

1 个答案: