Question

我正在设计一个包含很大的世界地图SVG的网页。我的问题是我可以使用<path>直接将其导入HTML，但是由于它太大，这会导致某些设备上的页面加载错误。然后，我决定尝试找到一种方法，将其压缩为一些较小的代码。

我尝试将整体保存为文件file.svg，并使用<img src="{% static 'PNG/file.svg' %}" />将其直接加载到html中，但是它不会加载已添加到特定坐标的动态图像。

那么我该如何将我的SVG路径转换为.svg文件，并保持动态图像及其各自的坐标？

我当前的代码可以运行，但是可以变大：

<svg style="fill: #142236; overflow-x: hidden;" class="Map" viewBox="0 -213 1766.961 874.341">
                    <path>Longdata......</path>
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="100" x="300" y="10" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="600" x="230" y="-70" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="300" x="900" y="-60" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="400" x="1050" y="-120" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="500"  x="1150" y="20" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="1200"  x="1250" y="-140" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="200" x="580" y="-280" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="700" x="900" y="300" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="800" x="820" y="100" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="900" x="490" y="280" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="1000" x="1420" y="330" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                    <image data-aos="fade-down" data-aos-duration="203" data-aos-delay="1100"  x="1300" y="0" width="80" height="290" xlink:href="{% static 'PNG/golem.png' %}" />
                  </svg>

整个SVG代码： https://pastebin.com/rU3GeTvU

Answer 1

如果问题出在路径长度，那么只要在有“ M”命令的地方都可以拆分路径。

即。更改：

<path id="Map" d="M 895.4368896484375 152.4791412353516 C 893.6979370117188 151.6047668457031 890.8810424804688 153.2721557617188 891.3057250976563 154.4424896240234 C 891.5921020507813 155.2454223632813 892.7576293945313 156.2630462646484 896.3822021484375 157.2088317871094 C 900.0067138671875 158.1550140380859 900.4414672851563 160.6248321533203 901.9644775390625 160.7012634277344 C 903.4885864257813 160.7730712890625 903.6312866210938 159.3158416748047 903.2685546875 157.3520812988281 C 902.90576171875 155.388671875 905.0786743164063 153.1334381103516 905.2980346679688 152.7705841064453 C 905.5126953125 152.4073181152344 904.357421875 151.8244171142578 901.3822631835938 152.4791412353516 C 898.4069213867188 153.1334381103516 897.179931640625 153.35302734375 895.4368896484375 152.4791412353516 Z M 871.577880859375 143.1622314453125 C 870.9236450195313 146.0003814697266 871.9405517578125 149.5692443847656 873.6073608398438 147.892333984375 C 875.2791137695313 146.2249298095703 876.0765991210938 147.0228576660156 877.0173950195313 145.7853088378906 C 877.9577026367188 144.5480499267578 877.1605834960938 139.9660949707031 877.81494140625 137.7823944091797 C 878.4688720703125 135.5990142822266 874.9110107421875 134.576904296875 873.3161010742188 135.9573516845703 C 871.7259521484375 137.3431549072266 870.40771484375 135.7184753417969 869.7676391601563 136.8317565917969 C 868.9657592773438 138.2175750732422 872.2321166992188 140.3245391845703 871.577880859375 143.1622314453125 Z M 1351.581298828125 368.0840759277344 C...

到

<g id="Map">
  <path d="M 895.4368896484375 152.4791412353516 C 893.6979370117188 151.6047668457031 890.8810424804688 153.2721557617188 891.3057250976563 154.4424896240234 C 891.5921020507813 155.2454223632813 892.7576293945313 156.2630462646484 896.3822021484375 157.2088317871094 C 900.0067138671875 158.1550140380859 900.4414672851563 160.6248321533203 901.9644775390625 160.7012634277344 C 903.4885864257813 160.7730712890625 903.6312866210938 159.3158416748047 903.2685546875 157.3520812988281 C 902.90576171875 155.388671875 905.0786743164063 153.1334381103516 905.2980346679688 152.7705841064453 C 905.5126953125 152.4073181152344 904.357421875 151.8244171142578 901.3822631835938 152.4791412353516 C 898.4069213867188 153.1334381103516 897.179931640625 153.35302734375 895.4368896484375 152.4791412353516 Z"/>
  <path d="M 871.577880859375 143.1622314453125 C 870.9236450195313 146.0003814697266 871.9405517578125 149.5692443847656 873.6073608398438 147.892333984375 C 875.2791137695313 146.2249298095703 876.0765991210938 147.0228576660156 877.0173950195313 145.7853088378906 C 877.9577026367188 144.5480499267578 877.1605834960938 139.9660949707031 877.81494140625 137.7823944091797 C 878.4688720703125 135.5990142822266 874.9110107421875 134.576904296875 873.3161010742188 135.9573516845703 C 871.7259521484375 137.3431549072266 870.40771484375 135.7184753417969 869.7676391601563 136.8317565917969 C 868.9657592773438 138.2175750732422 872.2321166992188 140.3245391845703 871.577880859375 143.1622314453125 Z"/>
  <path d="M 1351.581298828125 368.0840759277344 C...
  ...etc...
</g>

您不必在每个M上分开。只需使每条路径足够小而不会太长。

请注意，湖泊和内海应与所属国家保持相同的路径。

但是最终，对于您而言，找到一个没有所有内容的世界地图版本可能会更容易。网上有许多免费的SVG世界地图。

如何将SVG路径转换为.svg文件，以及如何将动态图像与坐标链接

1 个答案: