我正在尝试在svg中创建一个螺旋路径，正如您在下面的代码中看到的那样，但我希望笔触宽度从较厚的开始，并以像这样的here之类的较薄的一个结尾。有人可以帮忙吗？
<html>
<head>
</head>
<body>
<svg id="mySVG" width="400" height="400">
<path id="Spiral" stroke-width="3" fill="none" stroke="maroon" d="M200 200 S 200.2 200 200.4 200.1 200.6 200.2 200.7 200.4 200.8 200.6 200.9 200.8 200.9 201.1 200.9 201.4 200.8 201.6 200.6 201.9 200.4 202.2 200.2 202.4 199.8 202.6 199.5 202.8 199.1 202.9 198.6 202.9 198.2 202.9 197.7 202.8 197.2 202.6 196.8 202.4 196.3 202 195.9 201.6 195.5 201.1 195.2 200.6 195 200 194.8 199.3 194.8 198.7 194.8 197.9 194.9 197.2 195.1 196.5 195.5 195.8 195.9 195.1 196.5 194.4 197.1 193.8 197.8 193.3 198.7 192.9 199.5 192.6 200.5 192.4 201.5 192.3 202.5 192.4 203.5 192.6 204.5 192.9 205.5 193.4 206.4 194 207.3 194.7 208.1 195.6 208.7 196.5 209.3 197.6 209.7 198.8 210 200 210.1 201.3 210.1 202.6 209.9 203.9 209.5 205.2 208.9 206.5 208.2 207.7 207.3 208.8 206.2 209.8 205 210.7 203.7 211.4 202.3 212 200.8 212.4 199.2 212.6 197.6 212.6 196 212.4 194.4 211.9 192.8 211.3 191.3 210.5 189.9 209.4 188.7 208.2 187.6 206.8 186.6 205.3 185.9 203.6 185.3 201.9 185 200 184.9 198.1 185.1 196.2 185.5 194.3 186.2 192.4 187.1 190.6 188.2 188.9 189.5 187.4 191.1 186 192.8 184.8 194.7 183.8 196.8 183.1 198.9 182.6 201.1 182.4 203.3 182.5 205.6 182.9 207.7 183.5 209.9 184.5 211.9 185.7 213.7 187.1 215.4 188.8 216.8 190.8 218 192.9 219 195.1 219.6 197.5 220 200 220 202.5 219.8 205.1 219.2 207.6 218.2 210 217 212.3 215.5 214.5 213.6 216.5 211.6 218.2 209.3 219.7 206.8 220.9 204.2 221.8 201.4 222.4 198.6 222.6 195.7 222.4 192.9 221.9 190.1 221 187.5 219.8 185 218.2 182.7 216.3 180.6 214.1 178.8 211.7 177.3 209 176.2 206.1 175.4 203.1 175 200 175 196.8 175.4 193.7 176.2 190.6 177.4 187.6 179 184.7 180.9 182.1 183.2 179.7 185.7 177.5 188.6 175.8 191.7 174.3 194.9 173.3 198.3 172.7 201.7 172.5 205.2 172.7 208.7 173.4 212 174.5 215.2 176 218.2 178 221 180.3 223.5 183 225.6 185.9 227.3 189.2 228.7 192.6 229.6 196.3 230 200 230 203.8 229.4 207.6 228.5 211.3 227 214.8 225.1 218.2 222.7 221.4 220 224.2 216.9 226.7 213.5 228.8 209.9 230.4 206 231.6 202 232.3 198 232.5 193.9 232.2 189.8 231.4 185.9 230 182.1 228.2 178.6 225.9 175.4 223.1 172.5 220 170 216.5 168 212.7 166.5 208.6 165.5 204.4 165 200 165.1 195.6 165.7 191.2 166.9 186.9 168.6 182.8 170.9 178.8 173.6 175.2 176.8 172 180.4 169.1 184.3 166.7 188.6 164.8 193 163.5 197.7 162.7 202.4 162.5 207.1 162.9 211.7 163.9 216.3 165.4 220.6 167.6 224.6 170.3 228.3 173.4 231.6 177.1 234.4 181.1 236.6 185.5 238.4 190.2 239.5 195 240 200 239.9 205 239.1 210 237.7 214.9 235.8 219.7 233.2 224.1 230 228.2 226.4 231.9 222.3 235.1 217.8 237.8 213 239.9 207.9 241.5 202.7 242.3 197.3 242.5 192 242 186.7 240.9 181.6 239.1 176.7 236.6 172.2 233.6 168.1 230 164.4 225.9 161.3 221.3 158.7 216.3 156.8 211.1 155.6 205.6 155 200 155.2 194.3 156 188.7 157.6 183.2 159.9 177.9 162.8 173 166.3 168.4 170.4 164.2 175 160.7 180.1 157.7 185.5 155.3 191.2 153.6 197 152.7 203 152.5 209 153 214.8 154.3 220.5 156.4 225.9 159.1 231 162.6 235.6 166.6 239.6 171.2 243.1 176.3 245.9 181.8 248 187.7 249.4 193.8 250 200 249.8 206.3 248.8 212.5 247 218.6 244.5 224.5 241.3 230 237.3 235 232.8 239.6 227.6 243.6 222.1 246.9 216.1 249.5 209.8 251.3 203.3 252.3 196.7 252.5 190.1 251.9 183.6 250.4 177.3 248.1 171.4 245.1 165.8 241.3 160.8 236.8 156.3 231.7 152.5 226.1 149.4 220 147.1 213.6 145.6 206.9 145 200 145.2 193.1 146.3 186.2 148.3 179.5 151.1 173.1 154.7 167.1 159 161.5 164 156.5 169.7 152.2 175.8 148.6 182.4 145.8 189.3 143.8 196.4 142.7 203.6 142.5 210.8 143.2 217.9 144.8 224.8 147.3 231.3 150.7 237.4 154.8 242.9 159.7 247.7 165.3 251.9 171.5 255.2 178.1 257.7 185.2 259.3 192.5 260 200 259.7 207.5 258.5 215 256.3 222.3 253.3 229.3 249.4 235.9 244.6 241.9 239.1 247.3 233 252 226.3 255.9 219.2 259 211.7 261.1 203.9 262.3 196.1 262.5 188.2 261.7 180.5 259.9 173.1 257.2 166 253.5 159.5 249 153.5 243.7 148.2 237.6 143.7 230.9 140.1 223.7 137.4 216.1 135.7 208.1 135 200 135.3 191.8 136.7 183.7 139 175.9 142.3 168.3 146.6 161.2 151.7 154.7 157.7 148.8 164.3 143.8 171.6 139.6 179.3 136.3 187.4 134 195.8 132.7 204.2 132.5 212.7 133.4 221 135.3 229 138.3 236.7 142.2 243.7 147.1 250.2 152.9 255.8 159.4 260.6 166.7 264.5 174.5 267.4 182.7 269.2 191.3 270 200 269.6 208.8 268.2 217.5 265.6 226 262 234.1 257.4 241.7 251.9 248.7 245.5 255 238.4 260.5 230.6 265 222.2 268.5 213.5 270.9 204.5 272.3 195.4 272.5 186.4 271.5 177.4 269.4 168.8 266.2 160.7 262 153.1 256.7 146.2 250.5 140.1 243.5 135 235.7 130.8 227.4 127.7 218.6 125.8 209.4 125 200 125.4 190.6 127 181.2 129.7 172.2 133.6 163.5 138.5 155.3 144.5 147.8 151.3 141.1 159 135.3 167.3 130.5 176.2 126.8 185.5 124.2 195.1 122.8 204.9 122.6 214.6 123.6 224.1 125.8 233.3 129.2 242 133.8 250.1 139.4 257.4 146.1 263.9 153.6 269.4 161.8 273.8 170.8 277.1 180.2 279.2 190 280 200 279.6 210.1 277.9 220 274.9 229.7 270.8 238.9 265.5 247.6 259.2 255.6 251.9 262.7 243.7 268.9 234.8 274 225.3 278 215.4 280.7 205.2 282.2 194.8 282.4 184.5 281.3 174.4 278.9 164.6 275.3 155.3 270.4 146.7 264.4 138.9 257.4 132 249.4 126.2 240.6 121.5 231.1 118.1 221 115.9 210.6 115 200 115.5 189.3 117.3 178.8 120.4 168.5 124.8 158.7 130.4 149.5 137.2 141 144.9 133.4 153.6 126.9 163 121.5 173.1 117.3 183.7 114.3 194.5 112.8 205.5 112.6 216.5 113.8 227.2 116.3 237.6 120.2 247.4 125.4 256.5 131.7 264.7 139.2 272 147.7 278.2 157 283.1 167.1 286.8 177.7 289.1 188.7 290 200 289.5 211.3 287.6 222.5 284.2 233.4 279.6 243.7 273.6 253.5 266.5 262.4 258.3 270.4 249.1 277.3 239.1 283.1 228.4 287.5 217.3 290.6 205.8 292.2 194.2 292.4 182.6 291.2 171.3 288.4 160.3 284.3 150 278.9 140.3 272.1 131.6 264.2 124 255.3 117.5 245.4 112.2 234.8 108.4 223.5 105.9 211.9 105 200 105.6 188.1 107.6 176.3 111.1 164.8 116 153.8 122.3 143.6 129.9 134.1 138.6 125.7 148.2 118.4 158.8 112.4 170 107.7 181.8 104.5 193.9 102.8 206.1 102.6 218.3 103.9 230.3 106.8 241.8 111.1 252.7 116.9 262.9 124 272 132.4 280.1 141.8 286.9 152.2 292.4 163.4 296.5 175.2 299 187.5 299 187.5 "></path>
</svg>
</body>
</html>
答案 0 :(得分：2)
SVG路径不能有可变宽度笔划。你需要：
不要使用笔画。而是使用填充的路径，它可以旋转并变窄，或者
使用一系列彼此对齐的线条或路径。每个连续的路径将具有较窄的笔划宽度。给出宽度变窄的连续路径的幻觉。
与以下示例类似：
<svg stroke="black">
<path d="M 0,75 L 50,75" stroke-width="10"/>
<path d="M 50,75 L 100,75" stroke-width="9"/>
<path d="M 100,75 L 150,75" stroke-width="8"/>
<path d="M 150,75 L 200,75" stroke-width="7"/>
<path d="M 200,75 L 250,75" stroke-width="6"/>
<path d="M 250,75 L 300,75" stroke-width="5"/>
</svg>