Question

我有一个HTML文件，其中包含将所有<svg>内部导出到一个.SVG的链接。这是完美的，这是我需要的，社区帮助了我很多。

现在我有一个问题，即文件中的所有SVG都被堵塞在彼此之上。

我需要他们在网页上保持相同的“显示”。我尝试使用内部，内联和外部风格......但没有任何效果。

当我在任何程序中打开.SVG文件时，执行<svg>中的X和Y，但它不会影响HTML文档中的任何内容。

我正在使用svg-converter.js获取<img>中的所有.svg并转换为<svg>。

出于某种原因，在JS中，有些东西不允许我将<svg>内的所有<svg>分组到另一个<div>内，只在$("document").ready(function () { $('#tab').DataTable(); });内。我不知道这是否会导致风格问题没有被导出。

这是工作link。

非常感谢任何帮助。

Ps：我很想知道为什么我的问题被低估了。

Answer 1

您需要使用x和y属性在您的根<svg>元素内排列内部<svg>元素。

这样的事情（为了简洁起见，我用圆圈取代了SVG内容）：

＆＃13;

<svg xmlns="http://www.w3.org/3000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100%" height="100%" viewBox="0 0 1224 1224">

  <svg x="0" y="0" width="50%" height="50%" viewBox="0 0 612 612">
    <circle fill="#7AB344" cx="306" cy="306" r="250"/>
  </svg>
  <svg x="50%" y="0" width="50%" height="50%" viewBox="0 0 612 612">
    <circle fill="#8DD4F0" cx="306" cy="306" r="250"/>
  </svg>
  <svg x="0" y="50%" width="50%" height="50%" viewBox="0 0 612 612">
    <circle fill="orange" cx="306" cy="306" r="250"/>
  </svg>
  <svg x="50%" y="50%" width="50%" height="50%" viewBox="0 0 612 612">
    <circle fill="rebeccapurple" cx="306" cy="306" r="250"/>
  </svg>

</svg>

＆＃13;

Answer 2

这是最终的工作代码：

＆＃13;

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/3000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <head>
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://brand.express/projects/teste/svg-converter.js"></script>
  </head>
  <body>
    <main id="content">
      <div id="mySVG" style="width:100%;padding:0;margin:0;">
        <img src='img/leafers-sapling.svg' class='svg-convert' x="0" y="0" width="286px">
        <img src='img/aqualine-sapling.svg' class='svg-convert' x="286px" y="0" width="286px">
        <img src='img/leafers-sapling.svg' class='svg-convert' x="572px" y="0" width="286px">
        <img src='img/aqualine-sapling.svg' class='svg-convert' x="858px" y="0" width="286px">
      </div>
    </main>
    <script>
      //transforma os .svg para <svg>
      jQuery(document).ready(function($) {
        $('.svg-convert').svgConvert({
          onComplete: function() {
            exportSVG(document.getElementById('mySVG'));
          },
          svgCleanupAttr: []
        });
      });
    </script>
    <script>
    
      var exportSVG = function(divContainer) {
      
        var svgContainer = document.createElementNS("http://www.w3.org/1999/xhtml", "svg");
      
        svgContainer.setAttribute('width','1200px');
        $('#mySVG').find("svg").clone().appendTo(svgContainer);
       
        var svgData = svgContainer.outerHTML;
      
        var a = document.createElement('a');
        a.href = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgData);
        a.download = 'finalSVG.svg';
        a.innerHTML = 'download the .SVG file';
        document.body.appendChild(a);
      };
      </script>
  </body>
</html>

＆＃13;

使用<svg>导出样式为.svg

2 个答案: