簡體   English   中英

如何更改SVG的高度和寬度 <text> ,如果大於svg的高度和寬度 <rect> 在JavaScript中?

[英]How to change the height and width of svg <text>,if it is greater than the height and width of svg <rect> in javascript?

    <g id="newGroup" >
        <rect class="newClass" id="svg_106"  x="133.2" y="384.5" width="76.2" height="38.1" />
        <text class="newText" id="svg_110" style="pointer-events: inherit;" transform="matrix(0.7912 0 0 1 111.325 414.395)" x="31.5976" y="-12">This is a very long text text text text text</text>
    </g>

我想調整rect內部的文本,有些文本的寬度大於rect本身的寬度。我想調整文本以使其適合rect內部。

<text>元素上的transform使事情有些復雜。

我要做的是刪除轉換,然后測量文本的大小。 然后,您可以為其進行新的變換,以對其進行適當縮放並將其放置在正確的位置。

 adjustText("svg_106", "svg_110"); function adjustText(rectId, textId) { var rectElem = document.getElementById(rectId); var textElem = document.getElementById(textId); // Get the rectangle bounds var rectBBox = rectElem.getBBox(); // Clear the text position and transform so we can measure the text bounds properly textElem.setAttribute("x", "0"); textElem.setAttribute("y", "0"); textElem.removeAttribute("transform"); var textBBox = textElem.getBBox(); // Calculate an adjusted position and scale for the text var padding = 5; // How much horizontal padding between the text and the rectangle sides var scale = (rectBBox.width - 2 * padding) / textBBox.width; var textX = rectBBox.x + padding; var textY = rectBBox.y + (rectBBox.height / 2) - scale * (textBBox.y + textBBox.height / 2); // Add a new transform attribute to the text to position it in the new place with the new scale textElem.setAttribute("transform", "translate("+textX+","+textY+") scale("+scale+")"); } 
 .newClass { fill: grey; } 
 <svg viewBox="0 300 500 200"> <g id="newGroup" > <rect class="newClass" id="svg_106" x="133.2" y="384.5" width="76.2" height="38.1" /> <text class="newText" id="svg_110" style="pointer-events: inherit;" transform="matrix(0.7912 0 0 1 111.325 414.395)" x="31.5976" y="-12">This is a very long text text text text text</text> </g> </svg> 

您不需要javascript。 我將文本放在<symbol> ,並使符號適應rect的大小。 但是,您可以使用javascript計算<symbol>元素的viewBox。

 svg{border:1px solid} .newClass{stroke:black; fill:none;} text{fill:black;} 
 <svg viewBox="130 380 100 50"> <symbol id="test" viewBox="0 0 260 19"> <g id="g"> <text class="newText" id="svg_110" dominant-baseline="hanging" >This is a very long text text text text text</text> </g> </symbol> <g id="newGroup" > <rect class="newClass" id="svg_106" x="133.2" y="384.5" width="76.2" height="38.1" /> <use xlink:href="#test" style="pointer-events: inherit;" x="133.2" y="384.5" width="76.2" height="38.1" /> </g> </svg> 

在此示例中,我演示了如何使用javascript計算<symbol> viewBox屬性的值。

 let bbText = svg_110.getBBox(); test.setAttributeNS(null, "viewBox", `${bbText.x} ${bbText.y} ${bbText.width} ${bbText.height}`) 
 svg{border:1px solid} .newClass{stroke:black; fill:none;} text{fill:black;} 
 <svg viewBox="130 380 100 50"> <symbol id="test"> <text class="newText" id="svg_110" dominant-baseline="hanging" > This is a very long text text text text text </text> </symbol> <g id="newGroup" > <rect class="newClass" id="svg_106" x="133.2" y="384.5" width="76.2" height="38.1" /> <use xlink:href="#test" style="pointer-events: inherit;" x="133.2" y="384.5" width="76.2" height="38.1" /> </g> </svg> 

UPDATE

OP表示她/他無法更改SVG,但可以動態添加元素。 在下一個示例中,我將動態創建<symbol><use>元素。 請查看我的代碼中的注釋。

 const SVG_NS = 'http://www.w3.org/2000/svg'; const SVG_XLINK = "http://www.w3.org/1999/xlink"; let theText = document.querySelector("#svg_110"); let theRect = document.querySelector("#svg_106"); // create a new symbol element let symbol = document.createElementNS(SVG_NS, 'symbol'); symbol.setAttributeNS(null, "id", "theSymbol"); newGroup.appendChild(symbol); // get the size of the bounding box for the text let bbText = theText.getBBox(); // set the attribute viewBox for the symbol symbol.setAttributeNS(null, "viewBox", `${bbText.x} ${bbText.y} ${bbText.width} ${bbText.height}`) // clone the text and append it to the symbol let txt=theText.cloneNode(true); symbol.appendChild(txt); // remove the text theText.parentNode.removeChild(theText); // create a use element let use = document.createElementNS(SVG_NS, 'use'); // the use element is using the symbol use.setAttributeNS(SVG_XLINK, 'xlink:href', '#theSymbol'); // also is using the rect's attributes use.setAttributeNS(null, 'x', theRect.getAttribute("x")); use.setAttributeNS(null, 'y', theRect.getAttribute("y")); use.setAttributeNS(null, 'width', theRect.getAttribute("width")); use.setAttributeNS(null, 'height', theRect.getAttribute("height")); newGroup.appendChild(use); 
 svg{border:1px solid} .newClass{stroke:black; fill:none;} text{fill:black;} 
 <svg viewBox="130 380 150 100"> <g id="newGroup" > <rect class="newClass" id="svg_106" x="133.2" y="384.5" width="76.2" height="38.1" /> <text class="newText" id="svg_110" style="pointer-events: inherit;" x="31.5976" y="-12">This is a very long text text text text text</text> </g> </svg> 

只需在JavaScript中執行此操作即可:

var rect = document.getElementById("svg_106");
var text = document.getElementById("svg_110");
var aRect = rect.getBoundingClientRect();
var bRect = text.getBoundingClientRect();

if (aRect.top + aRect.height) < (bRect.top)) ||
    (aRect.top > (bRect.top + bRect.height)) ||
    ((aRect.left + aRect.width) < bRect.left) ||
    (aRect.left > (bRect.left + bRect.width) {
        //Do stuff
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM