Я генерирую SVG-файл в браузерном приложении, которое я хочу, чтобы пользователи могли загружать.
Поэтому я использую URL данных.
Вот что яm (скопировано непосредственно из проверки в браузере.)
<a download="pattern.svg" href="data:image/svg+xml;
<svg height="500" width="500">
<path style='-webkit-tap-highlight-color: rgba(0, 0, 0, 0);' stroke='rgb(0,0,0)' fill='rgb(255,255,150)' d='M 0 0 L 0 500 L 500 500 L 500 0 L 0 0'></path>
<path style='-webkit-tap-highlight-color: rgba(0, 0, 0, 0);' stroke-width='2px' stroke='rgb(200,150,200)' fill='rgb(100,50,100)' fill-opacity='0.78' d='M 162.5 49.999999999999986 L 136.5881372890605 85.66461936106826 L 94.66186271093949 72.04194696096775 L 94.66186271093949 27.95805303903226 L 136.58813728906054 14.335380638931749 L 162.5 49.999999999999986'></path>
<path style='-webkit-tap-highlight-color: rgba(0, 0, 0, 0);' stroke-width='2px' stroke='rgb(200,150,200)' fill='rgb(100,50,100)' fill-opacity='0.78' d='M 200 162.5 L 164.33538063893175 136.5881372890605 L 177.95805303903225 94.66186271093949 L 222.04194696096775 94.66186271093949 L 235.66461936106825 136.58813728906054 L 200 162.5'></path>
<path style='-webkit-tap-highlight-color: rgba(0, 0, 0, 0);' stroke-width='2px' stroke='rgb(200,150,200)' fill='rgb(100,50,100)' fill-opacity='0.78' d='M 87.5 200 L 113.41186271093947 164.33538063893175 L 155.33813728906054 177.95805303903225 L 155.33813728906054 222.04194696096775 L 113.41186271093947 235.66461936106825 L 87.5 200'></path>
<path style='-webkit-tap-highlight-color: rgba(0, 0, 0, 0);' stroke-width='2px' stroke='rgb(200,150,200)' fill='rgb(100,50,100)' fill-opacity='0.78' d='M 49.999999999999986 87.50000000000003 L 85.66461936106826 113.41186271093947 L 72.04194696096775 155.33813728906054 L 27.95805303903226 155.33813728906054 L 14.335380638931749 113.41186271093947 L 49.999999999999986 87.50000000000003'></path>
<path style='-webkit-tap-highlight-color: rgba(0, 0, 0, 0);' stroke-width='2px' stroke='rgb(200,150,200)' fill='rgb(100,50,100)' fill-opacity='0.78' d='M 162.5 300 L 136.5881372890605 335.6646193610683 L 94.66186271093949 322.0419469609678 L 94.66186271093949 277.9580530390323 L 136.58813728906054 264.3353806389317 L 162.5 300'></path>
<path style='-webkit-tap-highlight-color: rgba(0, 0, 0, 0);' stroke-width='2px' stroke='rgb(200,150,200)' fill='rgb(100,50,100)' fill-opacity='0.78' d='M 200 412.5 L 164.33538063893175 386.5881372890605 L 177.95805303903225 344.66186271093943 L 222.04194696096775 344.66186271093943 L 235.66461936106825 386.5881372890605 L 200 412.5'></path>
<path style='-webkit-tap-highlight-color: rgba(0, 0, 0, 0);' stroke-width='2px' stroke='rgb(200,150,200)' fill='rgb(100,50,100)' fill-opacity='0.78' d='M 87.5 450 L 113.41186271093947 414.3353806389317 L 155.33813728906054 427.9580530390322 L 155.33813728906054 472.0419469609677 L 113.41186271093947 485.6646193610683 L 87.5 450'></path>
<path style='-webkit-tap-highlight-color: rgba(0, 0, 0, 0);' stroke-width='2px' stroke='rgb(200,150,200)' fill='rgb(100,50,100)' fill-opacity='0.78' d='M 49.999999999999986 337.5 L 85.66461936106826 363.4118627109395 L 72.04194696096775 405.33813728906057 L 27.95805303903226 405.33813728906057 L 14.335380638931749 363.4118627109395 L 49.999999999999986 337.5'></path>
<path style='-webkit-tap-highlight-color: rgba(0, 0, 0, 0);' stroke-width='2px' stroke='rgb(200,150,200)' fill='rgb(100,50,100)' fill-opacity='0.78' d='M 412.5 49.999999999999986 L 386.5881372890605 85.66461936106826 L 344.66186271093943 72.04194696096775 L 344.66186271093943 27.95805303903226 L 386.58813728906057 14.335380638931749 L 412.5 49.999999999999986'></path>
<path style='-webkit-tap-highlight-color: rgba(0, 0, 0, 0);' stroke-width='2px' stroke='rgb(200,150,200)' fill='rgb(100,50,100)' fill-opacity='0.78' d='M 450 162.5 L 414.3353806389317 136.5881372890605 L 427.9580530390322 94.66186271093949 L 472.0419469609677 94.66186271093949 L 485.6646193610683 136.58813728906054 L 450 162.5'></path>
<path style='-webkit-tap-highlight-color: rgba(0, 0, 0, 0);' stroke-width='2px' stroke='rgb(200,150,200)' fill='rgb(100,50,100)' fill-opacity='0.78' d='M 337.5 200 L 363.4118627109395 164.33538063893175 L 405.33813728906057 177.95805303903225 L 405.33813728906057 222.04194696096775 L 363.4118627109395 235.66461936106825 L 337.5 200'></path>
<path style='-webkit-tap-highlight-color: rgba(0, 0, 0, 0);' stroke-width='2px' stroke='rgb(200,150,200)' fill='rgb(100,50,100)' fill-opacity='0.78' d='M 300 87.50000000000003 L 335.6646193610683 113.41186271093947 L 322.0419469609678 155.33813728906054 L 277.9580530390323 155.33813728906054 L 264.3353806389317 113.41186271093947 L 300 87.50000000000003'></path>
<path style='-webkit-tap-highlight-color: rgba(0, 0, 0, 0);' stroke-width='2px' stroke='rgb(200,150,200)' fill='rgb(100,50,100)' fill-opacity='0.78' d='M 412.5 300 L 386.5881372890605 335.6646193610683 L 344.66186271093943 322.0419469609678 L 344.66186271093943 277.9580530390323 L 386.58813728906057 264.3353806389317 L 412.5 300'></path>
<path style='-webkit-tap-highlight-color: rgba(0, 0, 0, 0);' stroke-width='2px' stroke='rgb(200,150,200)' fill='rgb(100,50,100)' fill-opacity='0.78' d='M 450 412.5 L 414.3353806389317 386.5881372890605 L 427.9580530390322 344.66186271093943 L 472.0419469609677 344.66186271093943 L 485.6646193610683 386.5881372890605 L 450 412.5'></path>
<path style='-webkit-tap-highlight-color: rgba(0, 0, 0, 0);' stroke-width='2px' stroke='rgb(200,150,200)' fill='rgb(100,50,100)' fill-opacity='0.78' d='M 337.5 450 L 363.4118627109395 414.3353806389317 L 405.33813728906057 427.9580530390322 L 405.33813728906057 472.0419469609677 L 363.4118627109395 485.6646193610683 L 337.5 450'></path>
<path style='-webkit-tap-highlight-color: rgba(0, 0, 0, 0);' stroke-width='2px' stroke='rgb(200,150,200)' fill='rgb(100,50,100)' fill-opacity='0.78' d='M 300 337.5 L 335.6646193610683 363.4118627109395 L 322.0419469609678 405.33813728906057 L 277.9580530390323 405.33813728906057 L 264.3353806389317 363.4118627109395 L 300 337.5'></path></svg>">Download</a>
Однако то, что я получаю, потеряло переднюю часть файла и начинается с
0, 0, 0);' stroke='rgb(0,0,0)' fill='rgb(255,255,150)' d='M 0 0 L 0 500
Почему я теряю начало потока данных?
Обратите внимание, что этот эффект возникает даже тогда, когда я копирую и вставляю приведенную выше ссылку на скачивание в пустой пустой HTML-файл.