2016-12-14 5 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

,하지만 당신이있어 깨끗한 결과를 제공하지 않습니다 찾고. 아래의 폴 (Paul)의 옵션 1을 권하고 싶습니다. –

답변

2

SVG 경로는 가변 폭 스트로크를 가질 수 없습니다.

  1. 뇌졸중을 사용하지 마십시오. 대신 나선형으로 들어가고 좁아지는 채워진 경로를 사용하십시오. 또는

  2. 일련의 줄 또는 경로를 서로 사용하십시오. 각각의 연속 경로는 더 좁은 스트로크 너비를가집니다. 너비가 좁은 연속 경로의 환영을줍니다.

    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>

관련 문제