JS 코드의 응답 텍스트에서 요소 사용

파일 내용을 얻기 위해 일부 논리를 사용합니다.JS 코드의 응답 텍스트에서 요소 사용

내가 SVG 파일을하고 난 이 지금은 일반 텍스트를 가지고 내가 필요로하는 문제는 여기서 시작

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

$.ajax() 기능을 ... 사용하여

내가 이렇게 코드에서 파일을 읽을 필요 문서는 JS 기능을 사용할 수 있습니다.

나는 getBBox()

그래서, 내가 document.createElment() 같은 것을 사용하고 싶지만 그것은 단지 그 속성을 가진 모든 요소 HTML 태그 이름을 받아 정확히해야합니다.

아래 SVG 파일을 먼저 경계 상자를 얻기 위해 DOM에 추가해야

<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>

출처

2017-12-15 Stevan Tosic

, 당신이 "사용"으로 무엇을 의미합니까 명확히하십시오? 아약스 응답, 즉 SVG 파일 내용과 함께해야 할 일이 무엇입니까? 페이지에 svg 이미지를 표시 하시겠습니까? 이것을 $ ('# your_element') .html (your_svg_contents)에 삽입 하시겠습니까? – 2oppin

테두리 상자를 가져 오려면 DOM에 추가해야합니다. jQuery 요소를 사용하여 아래 내 솔루션을 참조하십시오. –

의 응답의 일부입니다. 아래 예제에서는 화면 왼쪽에서 -10000 픽셀 오프셋 된 temp div를 사용하여 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>

출처

2017-12-15 13:10:19

JS 코드의 응답 텍스트에서 요소 사용

답변

관련 문제