Я сделал svg-файл в Affinity Designer (например, Illustrator), который довольно сложный.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 100 87" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g id="ArtBoard1" transform="matrix(0.860142,0,0,0.745211,-2242.28,0)">
<rect x="2606.87" y="0" width="116.26" height="116.26" style="fill:none;"/>
<clipPath id="_clip1">
<rect x="2606.87" y="0" width="116.26" height="116.26"/>
</clipPath>
<g clip-path="url(#_clip1)">
<g id="Koenigin_weiß" transform="matrix(3.90527e-17,0.736141,-0.637779,4.50757e-17,2680.5,571.956)">
<path d="M-619.035,69.78L-698,115.37L-776.965,69.78L-776.965,-21.402L-698,-66.993L-619.035,-21.402L-619.035,69.78Z" style="fill:none;"/>
<clipPath id="_clip2">
<path d="M-619.035,69.78L-698,115.37L-776.965,69.78L-776.965,-21.402L-698,-66.993L-619.035,-21.402L-619.035,69.78Z"/>
</clipPath>
<g clip-path="url(#_clip2)">
<g id="path6589" transform="matrix(5.9442e-17,-0.970761,0.970762,5.9442e-17,-810.861,232.713)">
<path d="M209.909,154.783C204.834,152.283 201.904,146.884 199.63,135.841L199.074,133.143L196.444,136.291C190.616,143.268 183.698,149.829 182.568,149.452C180.26,148.683 180.666,146.857 183.466,145.409C186.31,143.939 196.033,130.637 200.032,122.747L202.157,118.553L199.919,119.246C195.077,120.744 190.314,123.739 189.541,125.773C188.349,128.907 179.237,137.09 176.939,137.09C174.009,137.09 174.54,135.598 178.251,133.409C180.058,132.342 183.265,128.928 185.376,125.822C188.628,121.037 190.266,119.666 196.089,116.853C199.87,115.027 202.786,113.356 202.569,113.139C202.352,112.922 198.409,114.361 193.807,116.338C186.701,119.39 184.772,119.84 181.006,119.323C176.482,118.703 168.144,114.069 165.971,110.967C165.309,110.022 163.027,108.78 160.899,108.207C156.356,106.984 150.59,101.468 148.427,96.274L146.927,92.675L150.071,90.962C154.99,88.28 167.063,88.742 174.481,91.896C177.671,93.252 184.196,95.551 188.981,97.004C193.766,98.457 198.334,99.872 199.131,100.148C199.929,100.425 197.862,98.156 194.54,95.106C190.464,91.365 188.498,88.833 188.498,87.322C188.498,86.053 187.034,83.619 185.115,81.7C180.706,77.291 180.78,75.603 185.249,78.636C187.185,79.949 189.308,81.024 189.968,81.024C190.628,81.024 191.658,82.967 192.256,85.343C193.084,88.629 194.205,90.248 196.945,92.11C202.209,95.687 203.956,95.393 203.694,90.973C203.513,87.922 203.876,87.196 206.14,86.087C207.602,85.371 208.797,84.482 208.796,84.112C208.796,83.743 205.566,81.048 201.62,78.124C197.674,75.199 194.815,72.673 195.266,72.509C195.717,72.345 199.161,74.256 202.919,76.755C212.33,83.013 215.899,83.013 225.31,76.755C229.068,74.256 232.512,72.345 232.963,72.509C233.414,72.673 230.555,75.199 226.609,78.124C222.663,81.048 219.434,83.743 219.433,84.112C219.433,84.482 220.627,85.371 222.089,86.087C224.353,87.196 224.716,87.922 224.535,90.973C224.273,95.393 226.02,95.687 231.284,92.11C234.024,90.248 235.145,88.629 235.973,85.343C236.571,82.967 237.601,81.024 238.261,81.024C238.921,81.024 241.044,79.949 242.979,78.636C247.449,75.603 247.523,77.291 243.114,81.7C241.195,83.619 239.731,86.053 239.731,87.322C239.731,88.833 237.765,91.365 233.689,95.106C230.366,98.156 228.3,100.425 229.098,100.148C229.895,99.872 234.463,98.457 239.248,97.004C244.033,95.551 250.558,93.252 253.748,91.896C261.166,88.742 273.239,88.28 278.158,90.962L281.302,92.675L279.802,96.274C277.639,101.468 271.873,106.984 267.33,108.207C265.202,108.78 262.92,110.022 262.258,110.967C260.086,114.069 251.747,118.703 247.223,119.323C243.457,119.84 241.528,119.39 234.422,116.338C229.82,114.361 225.877,112.922 225.66,113.139C225.443,113.356 228.359,115.027 232.14,116.853C237.963,119.666 239.601,121.037 242.853,125.822C244.964,128.928 248.171,132.342 249.978,133.409C253.689,135.598 254.22,137.09 251.29,137.09C248.992,137.09 239.88,128.907 238.688,125.773C237.915,123.739 233.152,120.744 228.31,119.246L226.072,118.553L228.197,122.747C232.196,130.637 241.919,143.939 244.763,145.409C247.563,146.857 247.969,148.683 245.661,149.452C244.531,149.829 237.613,143.268 231.785,136.291L229.155,133.143L228.599,135.841C226.301,146.999 223.354,152.359 218.163,154.822C214.055,156.772 213.943,156.771 209.909,154.783L209.909,154.783ZM220.188,148.148C222.514,146.519 224.602,142.934 225.561,138.926C226.159,136.427 226.142,136.431 222.769,139.612C220.902,141.373 217.908,143.088 216.114,143.425C212.163,144.166 206.74,141.849 203.863,138.192L201.881,135.672L202.575,138.556C204.414,146.198 208.01,149.657 214.114,149.657C216.27,149.657 219.004,148.978 220.188,148.148ZM222.779,133.263C223.742,132.198 224.662,129.34 224.879,126.738C225.201,122.873 225.086,122.448 224.183,124.171C222.732,126.94 219.271,128.39 214.114,128.39C208.958,128.39 205.497,126.94 204.046,124.171C203.143,122.448 203.028,122.873 203.35,126.738C203.934,133.744 205.741,135.157 214.114,135.157C219.789,135.157 221.379,134.809 222.779,133.263L222.779,133.263ZM210.1,103C213.657,102.05 218.857,102.702 223.55,104.686C226.33,105.86 224.619,102.916 221.427,101.031C217.848,98.916 210.381,98.916 206.802,101.031C203.605,102.919 201.91,105.848 204.679,104.699C205.615,104.311 208.055,103.546 210.1,103L210.1,103Z" style="fill:rgb(77,77,77);fill-rule:nonzero;"/>
</g>
</g>
<path d="M-698,-66.993L-619.035,-21.402L-619.035,69.78L-698,115.37L-776.965,69.78L-776.965,-21.402L-698,-66.993ZM-698,113.266L-620.857,68.727L-620.857,-20.349L-698,-64.888L-775.143,-20.349L-775.143,68.727L-698,113.266Z" style="fill:rgb(77,77,77);"/>
</g>
</g>
</g>
</svg>
Мне нужно отобразить этот файл (возможно, несколько раз), чтобы иметь возможность разместить его в определенной позиции(х, у) и сможете «мгновенно» переместить его на новое место.Как мне этого добиться?Я уже пробовал svg.js:
var draw = SVG('drawing').size(500,500);
var mySvg = draw.svg('THE FILE FROM ABOVE');
mySvg.move(150,150);
Это показывает svg, но его угол всегда равен (0,0).Мне не нужно использовать svg.js.