Question

我做了一些逻辑来获取文件内容。

我有SVG文件，我需要在代码中读取文件

我使用$.ajax()函数

执行此操作

$.ajax({
    method: 'get',
    url: shapes.svg,
    dataType: 'html'
}).then(function (value) {
   // HTML code from SVG file.
    console.log(value);
});

问题从这里开始...... 现在我有纯文本，我需要文档才能使用JS函数。

我需要完全 getBBox()

所以，我想使用类似 document.createElment() 的内容，但它只接受HTML标记名称，而不是所有具有其属性的元素。

下面的

是SVG文件

的响应的一部分

    <svg x="0" y="0" width="2200" height="2200" version="1.1" xmlns="http://www.w3.org/2000/svg" id="svgimportshapes" xlink="http://www.w3.org/1999/xlink">
        <g xmlns="http://www.w3.org/2000/svg" data-paper-data="&quot;unlocked&quot;" id="ShapeLayer" fill="none" fill-rule="nonzero" stroke="none" stroke-width="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
        <text x="1018.68119" y="511.99246" id="text" fill="#000000" stroke="none" stroke-width="1" font-family="helvetica" font-weight="normal" font-size="18" text-anchor="start">Parterre places debout</text>
    </svg>

Answer 1

您需要先将其添加到DOM才能获取边界框。下面的例子使用一个temp div，它在屏幕左边偏移-10000px，在那里添加svg，getBBox（）返回值。获得bbox后删除元素。这不是一个最佳解决方案，但你明白了。

$(document).ready(function(){
  var svgstr= '<svg x="0" y="0" width="2200" height="2200" version="1.1" xmlns="http://www.w3.org/2000/svg" id="svgimportshapes" xlink="http://www.w3.org/1999/xlink">        <g xmlns="http://www.w3.org/2000/svg" data-paper-data="&quot;unlocked&quot;" id="ShapeLayer" fill="none" fill-rule="nonzero" stroke="none" stroke-width="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">        <text x="1018.68119" y="511.99246" id="text" fill="#000000" stroke="none" stroke-width="1" font-family="helvetica" font-weight="normal" font-size="18" text-anchor="start">Parterre places debout</text> </svg>'
  
  var svgElement = $(svgstr)
  $("#temp").append(svgElement)
  var bbox = svgElement[0].getBBox() 
  svgElement.remove()
  console.log(bbox)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="temp" style="position:absolute;left:-10000px"></div>

使用JS代码

1 个答案: