Many basic elements have been introduced before, including structure-related combinations and reuse elements. Here we will briefly summarize the remaining relevant elements in the document structure of SVG, and then move forward to appreciate other features of SVG.
The elements of SVG documents can basically be divided into the following categories:
•Animation elements: animate, animateColor, animateMotion, animateTransform, set;
•Explanation elements: desc, metadata, title;
•Graphics Elements: circle, ellipse, line, path, polygon, polyline, rect;
• Structural elements: defs, g, svg, symbol, use;
• Gradient elements: linearGradient, radialGradient;
• Other elements ：a,altGlyphDef,clipPath,color-profile,cursor,filter,font,font-face,foreignObject,image,marker,mask,pattern,script,style,switch,text,view, etc.
Among them, graphic elements, gradient elements, text, image elements and combinations have all been introduced. Here are several other elements related to structure.
View-svg element
You can place any other elements in any order within the svg element, including nested svg elements.
The commonly used attributes supported by the svg element are id, class, x, y, width, height, viewBox, preserveAspectRatio, and related attributes of fill and stroke.
The events supported by the svg element are also commonly used onload, onmouseover, onmousemove, onmousedown, onmouseup, onclick, onfocusin, onfocusout, onresize, onscroll, onunload, etc. Not much to say about the svg element. For a complete list of attributes and events, please refer to the official documentation later.
Explanatory elements-desc element and title element
Each container element (an element that can contain other container elements or graphic elements, such as: a, defs, glyph, g, Marker, mask, missing-glyph, pattern, svg, switch and symbol) and graphic elements can contain desc and title elements, both of which are auxiliary elements used to explain related situations; their contents are text . When the SVG document is rendered, these two elements will not be rendered into the graphic. The difference between these two elements is not too big. In some implementations, title appears as prompt information, so title is usually placed in the first position of the parent element.
Typical usage is as follows:
< ;svgxmlns="http://www.w3.org/2000/svg" version="1.1"width="4in"height="3in">
Companysalesbyregion< ;/title> <br><desc> <br>Thisisabarchartwhichshows <br>companysalesbyregion. <br></desc> <br><!--Barchartdefinedasvectordata--> 🎜></svg> <br><br><br>Usually, the outermost svg element should be accompanied by a title description, so that the program is more readable. </div>
<br><br>Marker-marker element <br> <strong>Marker defines graphic elements (arrows and multi-point markers) attached to one or more vertices (path, line, polyline or polygon vertices) ). Arrows can be made by attaching a marker to the start or end point of a path, line, or polyline. Multipoint markers can attach a marker to all vertices of a path, line, polyline or polygon. The </strong><br> mark is defined by the marker element, and then just set the relevant attributes (marker, marker-start, marker-mid, and marker-end) in path, line, polyline or polygon. Take an example: <br><br><br><br><div class="msgheader">
<div class="right">Copy the code<span style="CURSOR: pointer" onclick="copycode(getid('phpcode157'));"><u></u>The code is as follows:</span>
</div> </div><svgwidth=" 4in"height="2in" <div class="msgborder" id="phpcode157">viewBox="0040002000"version="1.1" <br />xmlns="http://www.w3.org/2000/svg"> <br><defs> <br><markerid="Triangle" <br />viewBox="001010"refX="0"refY="5" <br />markerUnits="strokeWidth" <br />markerWidth="4"markerHeight="3" <br />orient="auto"> <br><pathd="M00L105L010z"/> <br></marker> <br></defs> <br><desc>Placinganarrowheadattheendofapath. ;/desc> <br><pathd="M1000750L2000750L25001250" <br>fill="none"stroke="black"stroke-width="100" <br>marker-end="url(#Triangle)"/> ; <br></svg> <br><br><br><strong>Let’s take a detailed look at marker-related knowledge</strong>: <br>1. Marker is a container element that can store graphic elements, container elements, animations, gradient elements, etc. in any order. <br>2. The marker element can create a new view window: set the value of the viewBox. <br>3. Marker’s more important attributes: <br>markerUnits="strokeWidth|userSpaceOnUse" <br>This attribute defines the coordinate system used by the attributes markerWidth, markerHeight and marker content. This attribute has two optional values. The first value, strokeWidth, is the default value, which means that the units of the coordinate system used by the attributes markerWidth, markerHeight and the content of the marker are equal to the value set by the stroke-width of the graphic element that references the marker. <br><br>For example, in the above example, the width of the marker element is 400 and the height is 300. However, do not be confused. The coordinates used by the path in the mark element are the new user coordinate system set by the viewBox. <br> Another value of this attribute is userSpaceOnUse, which means that the attributes markerWidth, markerHeight and the content of the marker use the coordinate system of the graphic element that references the marker. <br>refX, refY: Define the position coordinates of the referenced point aligned with the marker. For example, in the above example, the referenced point is the end point, and it should be aligned to the (0,5) position of the marker. Note that refX and refY use the end-user coordinate system transformed by the viewBox. <br>markerWidth, markerHeight: The width and height of the marker window. This is easy to understand. <br>orient: defines the angle of marker rotation. You can specify an angle or assign auto directly. <br><strong>auto means that the positive direction of the x-axis is rotated according to the following rules </strong>: <br>a. If the point where the marker is located only belongs to one path, the positive x-axis direction of the marker is the same as the direction of the path. See the example above. <br>b. If the point where the marker is located belongs to two different paths, then the positive x-axis direction of the marker is consistent with the angular bisector of the angle between the two paths. <br>4. Marker attributes of graphic elements <br><br> If a graphic element wants to reference a marker, it needs to use related attributes, mainly these three: marker-start (put the referenced marker at the starting point), marker- mid (place the referenced marker at all points except the starting point and end point), marker-end (place the referenced marker at the end point). The values of these three attributes may be none (meaning not to reference the marker), marker reference (referencing a certain marker), and inherit (no need to say more about this). <br>You can also see the usage of markers from the above example. <br><br><strong>Script and style-script element and style element</strong> <br>In fact, basically all attributes (for all elements, not just text) can be associated with an element using CSS, And all CSS properties are available in SVG images. You can directly use the style attribute to style the element, or refer to the style sheet to style the element. Stylesheets should not be parsed for XML files (because they occasionally contain characters that can cause problems), so they need to be placed in an XMLCDATA section. The same goes for scripts, which need to be placed in the XMLCDATA section. Look at the following CSS example: <br><br><div class="msgheader">
<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode158'));"><u>Copy the code </u></span></div>The code is as follows:</div>
<div class="msgborder" id="phpcode158"> <br><svgwidth ="400"height="200"xmlns="http://www.w3.org/2000/svg"> <br><desc>Text</desc><defs> <br><styletype ="text/css"> <br><![CDATA[ <br />.abbreviation{text-decoration:underline;} <br />]]> <br></style> <br>< /defs> <br><g> <br><textx="20"y="50"font-size="30">Colorscanbespecified</text> <br><textx="20"y ="100"font-size="30">bytheir <br><tspanfill="rgb(255,0,0)"class="abbreviation">R</tspan> <br><tspanfill= "rgb(0,255,0)"class="abbreviation">G</tspan> <br><tspanfill="rgb(0,0,255)"class="abbreviation">B</tspan>values</ text> <br><textx="20"y="150"font-size="30">orbykeywordssuchas</text> <br><textx="20"y="200"> <br><tspanstyle="fill:lightsteelblue;font-size:30">lightsteelblue</tspan>, <br></text> <br></g> <br></svg> <br>
</div>
<br>Look at the script example again: <br><br><div class="msgheader">
<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode159'));"><u>Copy the code</u></span></div>The code is as follows:</div>
<div class="msgborder" id="phpcode159"> <br><svgwidth="500"height="300"xmlns="http://www.w3.org/2000/svg"> <br><desc>Scriptingtheonclickevent</desc> <br><defs> <br><scripttype="text/ecmascript"> <br><![CDATA[ <br />functionhideReveal(evt){ <br />varimageTarget=evt.target; <br />vartheFill=imageTarget.getAttribute("fill"); <br />if(theFill=='white') <br />imageTarget.setAttribute("fill","url(#notes)"); <br />else <br />imageTarget.setAttribute("fill","white"); <br />} <br />]]> <br></script> <br><patternid="notes"x="0"y="0"width="50"height="75" <br />patternTransform="rotate(15)" <br />patternUnits="userSpaceOnUse"> <br><ellipsecx="10"cy="30"rx="10"ry="5"/> <br><linex1="20"y1="30"x2="20"y2="0" <br />stroke-width="3"stroke="black"/> <br><linex1="20"y1="0"x2="30"y2="5" <br />stroke-width="3"stroke="black"/> <br></pattern> <br></defs> <br><ellipseonclick="hideReveal(evt)"cx="175"cy="100"rx="125"ry="60" <br />fill="url(#notes)"stroke="black"stroke-width="5"/> <br></svg> <br>
</div>
<br><strong>条件处理-switch元素</strong> <br>条件处理属性是能控制所在元素渲染与否的属性。基本上大多数的元素(特别是图形元素)都可以指定条件处理属性。条件处理属性有3个：requiredFeatures,requiredExtensions和systemLanguage。这些属性就是一组测试，都允许指定一个值列表(前面两个属性是空格隔开的，语言这个属性是使用逗号隔开的)，默认值都为true。 <br><br>SVG的switch元素提供了按指定条件渲染的能力。switch元素是一个容器元素，可以包含图形元素，解释性元素，动画元素，a,foreignObject,g,image,svg,switch,text,use等元素。switch元素会按顺序检查直接子元素的条件处理属性，然后渲染满足自身条件的的第一个子元素，其他的子元素都会被忽略。这些属性与display属性一样，只会影响直接使用这些属性的元素的渲染，不会影响引用的元素(比如use引用的元素)。简单的说，这3个属性会影响a,altGlyph,foreignObject,textPath,tref,tspan,animate,animateColor,animateMotion,animateTransform,set等元素，不会影响defs,cursor,mask,clipPath,pattern等元素(这些元素那么不是可渲染的，要么就是引用别的元素)。<br><br><strong>注意</strong>：子元素的display和visibility属性值并不影响switch元素条件判断的结果。 <br>条件处理属性的取值列表参看官方文档，这里就看一个小例子： <br><br><div class="msgheader">
<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode160'));"><u>复制代码</u></span></div>代码如下:</div>
<div class="msgborder" id="phpcode160"> <br><switch> <br><rectrequiredFeatures="http://www.w3.org/TR/SVG11/feature#Filter" <br />x="10"y="10"width="322"height="502"opacity="0.6" <br />fill="black"stroke="none"filter="url(#gblurshadow)"/> <br><rectx="10"y="10"width="322"height="502"opacity="0.6" <br />fill="black"stroke="none"/> <br></switch> <br>
</div>
<br>这个例子的意思简单的说就是：使用的浏览器支持filter特性，那么就绘制上面的矩形(带filter属性)，如果不支持filter特性，就绘制下面的矩形。 <br>其实更多的时候，用的比较多的属性是systemLanguage，就是文本的多语言处理能力。例如： <br><br><div class="msgheader">
<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode161'));"><u>复制代码</u></span></div>代码如下:</div>
<div class="msgborder" id="phpcode161"> <br><svgxmlns="http://www.w3.org/2000/svg" version="1.1"width="5cm"height="5cm"> <br><switch> <br><textx='10'y='20'systemLanguage="de">de-HAHA</text> <br><textx='10'y='20'systemLanguage="en">en-haha</text> <br></switch> <br></svg> <br>
</div>
<br><strong>实用参考</strong>：<br>脚本索引：<a href="http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx">http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx</a><br>开发中心：<a href="https://developer.mozilla.org/en/SVG">https://developer.mozilla.org/en/SVG</a><br>热门参考：<a href="http://www.chinasvg.com/">http://www.chinasvg.com/</a><br>官方文档：<a href="http://www.w3.org/TR/SVG11/">http://www.w3.org/TR/SVG11/</a></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="Html5 game development Ping Pong game example (3)_html5 tutorial skills" href="https://m.php.cn/faq/6459.html">Html5 game development Ping Pong game example (3)_html5 tutorial skills</a></span><span>Next article：<a class="dBlack" title="Html5 game development Ping Pong game example (3)_html5 tutorial skills" href="https://m.php.cn/faq/6464.html">Html5 game development Ping Pong game example (3)_html5 tutorial skills</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/348281.html" title="AlloyTouch full-screen scrolling plug-in creates a smooth H5 page in 30 seconds" class="aBlack">AlloyTouch full-screen scrolling plug-in creates a smooth H5 page in 30 seconds</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348372.html" title="HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)" class="aBlack">HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348373.html" title="Detailed explanation of image drawing examples in HTML5 canvas 9" class="aBlack">Detailed explanation of image drawing examples in HTML5 canvas 9</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348374.html" title="Regular expressions and new HTML5 elements" class="aBlack">Regular expressions and new HTML5 elements</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348469.html" title="How to combine NodeJS and HTML5 to drag and drop multiple files to upload to the server" class="aBlack">How to combine NodeJS and HTML5 to drag and drop multiple files to upload to the server</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '9']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script><!-- End Matomo Code --></html>
