2016-12-14 51 views
0

我想在svg中创建一个螺旋路径,就像你在下面的代码中看到的一样,但是我希望笔划的宽度从较粗一点开始,以一个像这样的较薄的一个结束here。有人可以帮忙吗?如何修改此SVG螺旋路径的行程宽度?

<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

您可以使用过滤器破解笔划宽度一点,但它不会给你干净的结果你寻找。我会推荐保罗下面的选项1。 –

回答

2

SVG路径不能具有可变宽度笔划。您需要:

  1. 请勿使用笔画。取而代之的是使用一条螺旋进来的填充路径,并像它那样变窄,或者使用一系列彼此对齐的线或路径。每个连续的路径将具有狭窄的行程宽度。给出一个宽度变窄的连续路径的错觉。

    像followong例如:

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