SVG_text.一般属性测试
Posted h5skill
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SVG_text.一般属性测试相关的知识,希望对你有一定的参考价值。
1、测试代码
<?xml version="1.0" encoding="UTF-8"?> <svg width="1000" height="800" viewBox="-500 -200 1000 800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:cge="http://iec.ch/TC57/2005/SVG-schema#" xmlns:hzsvg="http://holleygrid.cn/svg"> <script type="text/javascript" > <![CDATA[ <!-- // ZC: 动态的在SVG中绘制一个矩形 function DynamicCreateRect(_x, _y, _width, _height, _stroke, _strokeWidth, _fill) { var eleSvg = document.getElementsByTagName("svg")[0]; var strNS = eleSvg.getAttribute("xmlns"); var rect = document.createElementNS(strNS, "rect"); eleSvg.appendChild(rect); rect.setAttribute("x", _x); rect.setAttribute("y", _y); rect.setAttribute("width", _width); rect.setAttribute("height", _height); rect.setAttribute("stroke", _stroke); rect.setAttribute("stroke-width", _strokeWidth); rect.setAttribute("fill", _fill); } window.onload = function(evt) { var text01 = document.getElementById("text01"); var text02 = document.getElementById("text02"); var text03 = document.getElementById("text03"); var tspan0201 = document.getElementById("tspan0201"); var tspan0202 = document.getElementById("tspan0202"); var tspan0301 = document.getElementById("tspan0301"); var rt01 = text01.getBBox(); var rt02 = text02.getBBox(); var rt03 = text03.getBBox(); var rt0201 = tspan0201.getBBox(); var rt0202 = tspan0202.getBBox(); var rt0301 = tspan0301.getBBox(); // ZC: 说明 隐藏的 <text/>照样也是绘制出来了,只是肉眼看不到 console.log(rt01.x + ", " + rt01.y + ", " + rt01.width + ", " + rt01.height); console.log(""); // ZC: <text/>的BBox()矩形 和 <tspan/>的BBox()矩形 在数值上是一样的 - (1) console.log(rt02.x + ", " + rt02.y + ", " + rt02.width + ", " + rt02.height); console.log(rt0201.x + ", " + rt0201.y + ", " + rt0201.width + ", " + rt0201.height); console.log(rt0202.x + ", " + rt0202.y + ", " + rt0202.width + ", " + rt0202.height); console.log(""); // ZC: <text/>的BBox()矩形 和 <tspan/>的BBox()矩形 在数值上是一样的 - (2) console.log(rt03.x + ", " + rt03.y + ", " + rt03.width + ", " + rt03.height); console.log(rt0301.x + ", " + rt0301.y + ", " + rt0301.width + ", " + rt0301.height); console.log(""); DynamicCreateRect(-200, 400, 200, 21, "red", "1", "none"); //* // ZC: <text/>没有 innerText属性 var testText01 = document.getElementById("testText01"); for (z in testText01) console.log(z + " ==> " + testText01[z]); console.log(""); var testText01 = document.getElementById("testText01"); console.log("testText01.childNodes.length : " + testText01.childNodes.length); testText01.innerhtml = "";// ZC: 这个时候 console.log("testText01.childNodes.length : " + testText01.childNodes.length); testText01.innerHTML = "A"; console.log("testText01.childNodes.length : " + testText01.childNodes.length + " , " + testText01.childNodes[0].nodeType); //*/ }; --> ]]> </script> <!-- 这里可以看出 tspan的dy是针对上一个tspan而言的(相信dx也是同样的原理) --> <text x="-400" y="-150" > <tspan x="-400">测试1,测试2,测试3,测试4,测试5,</tspan> <tspan x="-400" dy="21">测试6,测试7,测试8,测试9,测试10。</tspan> <tspan x="-400" dy="21">abcdefg.1234567890.</tspan> </text> <!-- 貌似上面说的也不全对...可以理解成:tspan的dy是针对上一个 文本段落而言的(dx应该也是同样的原理) --> <text x="0" y="-150" > 测试1,测试2,测试3,测试4,测试5, <tspan x="0" dy="21">测试6,测试7,测试8,测试9,测试10。</tspan> <tspan x="0" dy="21">abcdefg.1234567890.</tspan> </text> <text id="text01" x="-400" y="-100" visibility="hidden">1234567890</text> <!-- tspan不设置 dx&dy或x&y属性的话,就和一般的 text元素看上去一样 --> <text id="text02" x="-400" y="-50" > <tspan id="tspan0201">测试1,测试2,测试3,测试4,测试5,</tspan> <tspan id="tspan0202">测试6,测试7,测试8,测试9,测试10。</tspan> </text> <text id="text03" x="-400" y="50" > 测试1,测试2,测试3,测试4,测试5, <tspan id="tspan0301">测试6,测试7,测试8,测试9,测试10。</tspan> </text> <rect x="0" y="0" width="100" height="1" stroke="none" fill="blue"/> <text x="-100" y="200" id="text01" > <tspan id="text0101">Whatever text you want</tspan> <tspan id="text0102" dx="0" dy="21">here. 1234567890.1234567890</tspan> </text> <text id="testText01" /> </svg> <?DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"?>
2、网页运行效果
3、控制台输出
Text_test_Z01.svg:46 -400, -117, 93.828125, 21 Text_test_Z01.svg:47 Text_test_Z01.svg:50 -401, -67, 588.9375, 21 Text_test_Z01.svg:51 -401, -67, 588.9375, 21 Text_test_Z01.svg:52 -401, -67, 588.9375, 21 Text_test_Z01.svg:53 Text_test_Z01.svg:56 -401, 33, 588.9375, 21 Text_test_Z01.svg:57 -401, 33, 588.9375, 21 Text_test_Z01.svg:58 Text_test_Z01.svg:68 x ==> [object SVGAnimatedLengthList] Text_test_Z01.svg:68 y ==> [object SVGAnimatedLengthList] Text_test_Z01.svg:68 dx ==> [object SVGAnimatedLengthList] Text_test_Z01.svg:68 dy ==> [object SVGAnimatedLengthList] Text_test_Z01.svg:68 rotate ==> [object SVGAnimatedNumberList] Text_test_Z01.svg:68 LENGTHADJUST_SPACINGANDGLYPHS ==> 2 Text_test_Z01.svg:68 LENGTHADJUST_SPACING ==> 1 Text_test_Z01.svg:68 LENGTHADJUST_UNKNOWN ==> 0 Text_test_Z01.svg:68 textLength ==> [object SVGAnimatedLength] Text_test_Z01.svg:68 lengthAdjust ==> [object SVGAnimatedEnumeration] Text_test_Z01.svg:68 getNumberOfChars ==> function getNumberOfChars() { [native code] } Text_test_Z01.svg:68 getComputedTextLength ==> function getComputedTextLength() { [native code] } Text_test_Z01.svg:68 getSubStringLength ==> function getSubStringLength() { [native code] } Text_test_Z01.svg:68 getStartPositionOfChar ==> function getStartPositionOfChar() { [native code] } Text_test_Z01.svg:68 getEndPositionOfChar ==> function getEndPositionOfChar() { [native code] } Text_test_Z01.svg:68 getExtentOfChar ==> function getExtentOfChar() { [native code] } Text_test_Z01.svg:68 getRotationOfChar ==> function getRotationOfChar() { [native code] } Text_test_Z01.svg:68 getCharNumAtPosition ==> function getCharNumAtPosition() { [native code] } Text_test_Z01.svg:68 selectSubString ==> function selectSubString() { [native code] } Text_test_Z01.svg:68 transform ==> [object SVGAnimatedTransformList] Text_test_Z01.svg:68 nearestViewportElement ==> [object SVGSVGElement] Text_test_Z01.svg:68 farthestViewportElement ==> [object SVGSVGElement] Text_test_Z01.svg:68 requiredExtensions ==> [object SVGStringList] Text_test_Z01.svg:68 systemLanguage ==> [object SVGStringList] Text_test_Z01.svg:68 getBBox ==> function getBBox() { [native code] } Text_test_Z01.svg:68 getCTM ==> function getCTM() { [native code] } Text_test_Z01.svg:68 getScreenCTM ==> function getScreenCTM() { [native code] } Text_test_Z01.svg:68 className ==> [object SVGAnimatedString] Text_test_Z01.svg:68 dataset ==> [object DOMStringMap] Text_test_Z01.svg:68 style ==> [object CSSStyleDeclaration] Text_test_Z01.svg:68 ownerSVGElement ==> [object SVGSVGElement] Text_test_Z01.svg:68 viewportElement ==> [object SVGSVGElement] Text_test_Z01.svg:68 tabIndex ==> -1 Text_test_Z01.svg:68 onabort ==> null Text_test_Z01.svg:68 onblur ==> null Text_test_Z01.svg:68 oncancel ==> null Text_test_Z01.svg:68 oncanplay ==> null Text_test_Z01.svg:68 oncanplaythrough ==> null Text_test_Z01.svg:68 onchange ==> null Text_test_Z01.svg:68 onclick ==> null Text_test_Z01.svg:68 onclose ==> null Text_test_Z01.svg:68 oncontextmenu ==> null Text_test_Z01.svg:68 oncuechange ==> null Text_test_Z01.svg:68 ondblclick ==> null Text_test_Z01.svg:68 ondrag ==> null Text_test_Z01.svg:68 ondragend ==> null Text_test_Z01.svg:68 ondragenter ==> null Text_test_Z01.svg:68 ondragleave ==> null Text_test_Z01.svg:68 ondragover ==> null Text_test_Z01.svg:68 ondragstart ==> null Text_test_Z01.svg:68 ondrop ==> null Text_test_Z01.svg:68 ondurationchange ==> null Text_test_Z01.svg:68 onemptied ==> null Text_test_Z01.svg:68 onended ==> null Text_test_Z01.svg:68 onerror ==> null Text_test_Z01.svg:68 onfocus ==> null Text_test_Z01.svg:68 oninput ==> null Text_test_Z01.svg:68 oninvalid ==> null Text_test_Z01.svg:68 onkeydown ==> null Text_test_Z01.svg:68 onkeypress ==> null Text_test_Z01.svg:68 onkeyup ==> null Text_test_Z01.svg:68 onload ==> null Text_test_Z01.svg:68 onloadeddata ==> null Text_test_Z01.svg:68 onloadedmetadata ==> null Text_test_Z01.svg:68 onloadstart ==> null Text_test_Z01.svg:68 onmousedown ==> null Text_test_Z01.svg:68 onmouseenter ==> null Text_test_Z01.svg:68 onmouseleave ==> null Text_test_Z01.svg:68 onmousemove ==> null Text_test_Z01.svg:68 onmouseout ==> null Text_test_Z01.svg:68 onmouseover ==> null Text_test_Z01.svg:68 onmouseup ==> null Text_test_Z01.svg:68 onmousewheel ==> null Text_test_Z01.svg:68 onpause ==> null Text_test_Z01.svg:68 onplay ==> null Text_test_Z01.svg:68 onplaying ==> null Text_test_Z01.svg:68 onprogress ==> null Text_test_Z01.svg:68 onratechange ==> null Text_test_Z01.svg:68 onreset ==> null Text_test_Z01.svg:68 onresize ==> null Text_test_Z01.svg:68 onscroll ==> null Text_test_Z01.svg:68 onseeked ==> null Text_test_Z01.svg:68 onseeking ==> null Text_test_Z01.svg:68 onselect ==> null Text_test_Z01.svg:68 onstalled ==> null Text_test_Z01.svg:68 onsubmit ==> null Text_test_Z01.svg:68 onsuspend ==> null Text_test_Z01.svg:68 ontimeupdate ==> null Text_test_Z01.svg:68 ontoggle ==> null Text_test_Z01.svg:68 onvolumechange ==> null Text_test_Z01.svg:68 onwaiting ==> null Text_test_Z01.svg:68 onwheel ==> null Text_test_Z01.svg:68 onauxclick ==> null Text_test_Z01.svg:68 ongotpointercapture ==> null Text_test_Z01.svg:68 onlostpointercapture ==> null Text_test_Z01.svg:68 onpointerdown ==> null Text_test_Z01.svg:68 onpointermove ==> null Text_test_Z01.svg:68 onpointerup ==> null Text_test_Z01.svg:68 onpointercancel ==> null Text_test_Z01.svg:68 onpointerover ==> null Text_test_Z01.svg:68 onpointerout ==> null Text_test_Z01.svg:68 onpointerenter ==> null Text_test_Z01.svg:68 onpointerleave ==> null Text_test_Z01.svg:68 nonce ==> Text_test_Z01.svg:68 focus ==> function focus() { [native code] } Text_test_Z01.svg:68 blur ==> function blur() { [native code] } Text_test_Z01.svg:68 namespaceURI ==> http://www.w3.org/2000/svg Text_test_Z01.svg:68 prefix ==> null Text_test_Z01.svg:68 localName ==> text Text_test_Z01.svg:68 tagName ==> text Text_test_Z01.svg:68 id ==> testText01 Text_test_Z01.svg:68 classList ==> Text_test_Z01.svg:68 slot ==> Text_test_Z01.svg:68 attributes ==> [object NamedNodeMap] Text_test_Z01.svg:68 shadowRoot ==> null Text_test_Z01.svg:68 assignedSlot ==> null Text_test_Z01.svg:68 innerHTML ==> Text_test_Z01.svg:68 outerHTML ==> <text xmlns="http://www.w3.org/2000/svg" id="testText01"/> Text_test_Z01.svg:68 scrollTop ==> 0 Text_test_Z01.svg:68 scrollLeft ==> 0 Text_test_Z01.svg:68 scrollWidth ==> 0 Text_test_Z01.svg:68 scrollHeight ==> 0 Text_test_Z01.svg:68 clientTop ==> 0 Text_test_Z01.svg:68 clientLeft ==> 0 Text_test_Z01.svg:68 clientWidth ==> 0 Text_test_Z01.svg:68 clientHeight ==> 0 Text_test_Z01.svg:68 onbeforecopy ==> null Text_test_Z01.svg:68 onbeforecut ==> null Text_test_Z01.svg:68 onbeforepaste ==> null Text_test_Z01.svg:68 oncopy ==> null Text_test_Z01.svg:68 oncut ==> null Text_test_Z01.svg:68 onpaste ==> null Text_test_Z01.svg:68 onsearch ==> null Text_test_Z01.svg:68 onselectstart ==> null Text_test_Z01.svg:68 previousElementSibling ==> [object SVGTextElement] Text_test_Z01.svg:68 nextElementSibling ==> [object SVGRectElement] Text_test_Z01.svg:68 children ==> [object HTMLCollection] Text_test_Z01.svg:68 firstElementChild ==> null Text_test_Z01.svg:68 lastElementChild ==> null Text_test_Z01.svg:68 childElementCount ==> 0 Text_test_Z01.svg:68 onwebkitfullscreenchange ==> null Text_test_Z01.svg:68 onwebkitfullscreenerror ==> null Text_test_Z01.svg:68 setPointerCapture ==> function setPointerCapture() { [native code] } Text_test_Z01.svg:68 releasePointerCapture ==> function releasePointerCapture() { [native code] } Text_test_Z01.svg:68 hasPointerCapture ==> function hasPointerCapture() { [native code] } Text_test_Z01.svg:68 hasAttributes ==> function hasAttributes() { [native code] } Text_test_Z01.svg:68 getAttributeNames ==> function getAttributeNames() { [native code] } Text_test_Z01.svg:68 getAttribute ==> function getAttribute() { [native code] } Text_test_Z01.svg:68 getAttributeNS ==> function getAttributeNS() { [native code] } Text_test_Z01.svg:68 setAttribute ==> function setAttribute() { [native code] } Text_test_Z01.svg:68 setAttributeNS ==> function setAttributeNS() { [native code] } Text_test_Z01.svg:68 removeAttribute ==> function removeAttribute() { [native code] } Text_test_Z01.svg:68 removeAttributeNS ==> function removeAttributeNS() { [native code] } Text_test_Z01.svg:68 hasAttribute ==> function hasAttribute() { [native code] } Text_test_Z01.svg:68 hasAttributeNS ==> function hasAttributeNS() { [native code] } Text_test_Z01.svg:68 getAttributeNode ==> function getAttributeNode() { [native code] } Text_test_Z01.svg:68 getAttributeNodeNS ==> function getAttributeNodeNS() { [native code] } Text_test_Z01.svg:68 setAttributeNode ==> function setAttributeNode() { [native code] } Text_test_Z01.svg:68 setAttributeNodeNS ==> function setAttributeNodeNS() { [native code] } Text_test_Z01.svg:68 removeAttributeNode ==> function removeAttributeNode() { [native code] } Text_test_Z01.svg:68 closest ==> function closest() { [native code] } Text_test_Z01.svg:68 matches ==> function matches() { [native code] } Text_test_Z01.svg:68 webkitMatchesSelector ==> function webkitMatchesSelector() { [native code] } Text_test_Z01.svg:68 attachShadow ==> function attachShadow() { [native code] } Text_test_Z01.svg:68 getElementsByTagName ==> function getElementsByTagName() { [native code] } Text_test_Z01.svg:68 getElementsByTagNameNS ==> function getElementsByTagNameNS() { [native code] } Text_test_Z01.svg:68 getElementsByClassName ==> function getElementsByClassName() { [native code] } Text_test_Z01.svg:68 insertAdjacentElement ==> function insertAdjacentElement() { [native code] } Text_test_Z01.svg:68 insertAdjacentText ==> function insertAdjacentText() { [native code] } Text_test_Z01.svg:68 insertAdjacentHTML ==> function insertAdjacentHTML() { [native code] } Text_test_Z01.svg:68 requestPointerLock ==> function requestPointerLock() { [native code] } Text_test_Z01.svg:68 getClientRects ==> function getClientRects() { [native code] } Text_test_Z01.svg:68 getBoundingClientRect ==> function getBoundingClientRect() { [native code] } Text_test_Z01.svg:68 scrollIntoView ==> function scrollIntoView() { [native code] } Text_test_Z01.svg:68 scrollIntoViewIfNeeded ==> function scrollIntoViewIfNeeded() { [native code] } Text_test_Z01.svg:68 animate ==> function animate() { [native code] } Text_test_Z01.svg:68 before ==> function before() { [native code] } Text_test_Z01.svg:68 after ==> function after() { [native code] } Text_test_Z01.svg:68 replaceWith ==> function replaceWith() { [native code] } Text_test_Z01.svg:68 remove ==> function remove() { [native code] } Text_test_Z01.svg:68 prepend ==> function prepend() { [native code] } Text_test_Z01.svg:68 append ==> function append() { [native code] } Text_test_Z01.svg:68 querySelector ==> function querySelector() { [native code] } Text_test_Z01.svg:68 querySelectorAll ==> function querySelectorAll() { [native code] } Text_test_Z01.svg:68 webkitRequestFullScreen ==> function webkitRequestFullScreen() { [native code] } Text_test_Z01.svg:68 webkitRequestFullscreen ==> function webkitRequestFullscreen() { [native code] } Text_test_Z01.svg:68 attributeStyleMap ==> [object StylePropertyMap] Text_test_Z01.svg:68 scroll ==> function scroll() { [native code] } Text_test_Z01.svg:68 scrollTo ==> function scrollTo() { [native code] } Text_test_Z01.svg:68 scrollBy ==> function scrollBy() { [native code] } Text_test_Z01.svg:68 createShadowRoot ==> function createShadowRoot() { [native code] } Text_test_Z01.svg:68 getDestinationInsertionPoints ==> function getDestinationInsertionPoints() { [native code] } Text_test_Z01.svg:68 computedStyleMap ==> function computedStyleMap() { [native code] } Text_test_Z01.svg:68 ELEMENT_NODE ==> 1 Text_test_Z01.svg:68 ATTRIBUTE_NODE ==> 2 Text_test_Z01.svg:68 TEXT_NODE ==> 3 Text_test_Z01.svg:68 CDATA_SECTION_NODE ==> 4 Text_test_Z01.svg:68 ENTITY_REFERENCE_NODE ==> 5 Text_test_Z01.svg:68 ENTITY_NODE ==> 6 Text_test_Z01.svg:68 PROCESSING_INSTRUCTION_NODE ==> 7 Text_test_Z01.svg:68 COMMENT_NODE ==> 8 Text_test_Z01.svg:68 DOCUMENT_NODE ==> 9 Text_test_Z01.svg:68 DOCUMENT_TYPE_NODE ==> 10 Text_test_Z01.svg:68 DOCUMENT_FRAGMENT_NODE ==> 11 Text_test_Z01.svg:68 NOTATION_NODE ==> 12 Text_test_Z01.svg:68 DOCUMENT_POSITION_DISCONNECTED ==> 1 Text_test_Z01.svg:68 DOCUMENT_POSITION_PRECEDING ==> 2 Text_test_Z01.svg:68 DOCUMENT_POSITION_FOLLOWING ==> 4 Text_test_Z01.svg:68 DOCUMENT_POSITION_CONTAINS ==> 8 Text_test_Z01.svg:68 DOCUMENT_POSITION_CONTAINED_BY ==> 16 Text_test_Z01.svg:68 DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC ==> 32 Text_test_Z01.svg:68 nodeType ==> 1 Text_test_Z01.svg:68 nodeName ==> text Text_test_Z01.svg:68 baseURI ==> file:///E:/Project_SVG/Text_test_Z01.svg Text_test_Z01.svg:68 isConnected ==> true Text_test_Z01.svg:68 ownerDocument ==> [object XMLDocument] Text_test_Z01.svg:68 parentNode ==> [object SVGSVGElement] Text_test_Z01.svg:68 parentElement ==> [object SVGSVGElement] Text_test_Z01.svg:68 childNodes ==> [object NodeList] Text_test_Z01.svg:68 firstChild ==> null Text_test_Z01.svg:68 lastChild ==> null Text_test_Z01.svg:68 previousSibling ==> [object Text] Text_test_Z01.svg:68 nextSibling ==> [object Text] Text_test_Z01.svg:68 nodeValue ==> null Text_test_Z01.svg:68 textContent ==> Text_test_Z01.svg:68 hasChildNodes ==> function hasChildNodes() { [native code] } Text_test_Z01.svg:68 getRootNode ==> function getRootNode() { [native code] } Text_test_Z01.svg:68 normalize ==> function normalize() { [native code] } Text_test_Z01.svg:68 cloneNode ==> function cloneNode() { [native code] } Text_test_Z01.svg:68 isEqualNode ==> function isEqualNode() { [native code] } Text_test_Z01.svg:68 isSameNode ==> function isSameNode() { [native code] } Text_test_Z01.svg:68 compareDocumentPosition ==> function compareDocumentPosition() { [native code] } Text_test_Z01.svg:68 contains ==> function contains() { [native code] } Text_test_Z01.svg:68 lookupPrefix ==> function lookupPrefix() { [native code] } Text_test_Z01.svg:68 lookupNamespaceURI ==> function lookupNamespaceURI() { [native code] } Text_test_Z01.svg:68 isDefaultNamespace ==> function isDefaultNamespace() { [native code] } Text_test_Z01.svg:68 insertBefore ==> function insertBefore() { [native code] } Text_test_Z01.svg:68 appendChild ==> function appendChild() { [native code] } Text_test_Z01.svg:68 replaceChild ==> function replaceChild() { [native code] } Text_test_Z01.svg:68 removeChild ==> function removeChild() { [native code] } Text_test_Z01.svg:68 addEventListener ==> function addEventListener() { [native code] } Text_test_Z01.svg:68 removeEventListener ==> function removeEventListener() { [native code] } Text_test_Z01.svg:68 dispatchEvent ==> function dispatchEvent() { [native code] } Text_test_Z01.svg:69 Text_test_Z01.svg:72 testText01.childNodes.length : 0 Text_test_Z01.svg:74 testText01.childNodes.length : 0 Text_test_Z01.svg:76 testText01.childNodes.length : 1 , 3
4、
5、
以上是关于SVG_text.一般属性测试的主要内容,如果未能解决你的问题,请参考以下文章
在Tomcat的安装目录下conf目录下的server.xml文件中增加一个xml代码片段,该代码片段中每个属性的含义与用途
CTS测试CtsWindowManagerDeviceTestCases模块的testShowWhenLockedImeActivityAndShowSoftInput测试fail项解决方法(代码片段