xml地图|网站地图|网站标签 [设为首页] [加入收藏]

澳门皇家赌场SVG基础以及使用Javascript

来源:http://www.ccidsi.com 作者:集成介绍 人气:86 发布时间:2019-05-06
摘要:事件管理 SVG也得以像HTML那样为要素增多自定义事件。 使用 on 事件名 属性监听: // SVGtext id="text" x="25" y="25" font-size="16" style="fill:rgb(0,0,0);"foo/text;// JSscript var text = document.getElementById( "

事件管理

SVG也得以像HTML那样为要素增多自定义事件。
使用on 事件名属性监听:

// SVG
<text id="text" x="25" y="25" font-size="16" style="fill:rgb(0,0,0);">foo</text>;

// JS
<script>
    var text = document.getElementById( "text" );
    // 点击文本时弹出其内容
    text.onclick = function() {
        alert( this.textContent );
    };
</script>

也能够行使element.addEventListener艺术监听:

// SVG
<text id="text" x="25" y="25" font-size="16" style="fill:rgb(0,0,0);">foo</text>;

// JS
<script>
    var text = document.getElementById( "text" );
    // 点击文本时弹出其内容
    // 事件名前面不带on
    text.addEventListener( 'click', function() {
        alert( this.textContent );
    } );
</script>

三种方法有何两样?on 事件名本性只可以为同1个事件增多二个甩卖方法,再对那脾特性举行设置时会覆盖掉上一个方法,而element.addEventListener壹再利用也不会覆盖上一个,而是从原来的风浪上附加。

在HTML中使用SVG

基础部分看W3SCHOOL的学科:

专程要小心SVG in HTML部分,它介绍了怎么着在HTML中应用SVG,大概会相比费心,庆幸的是在支持HTML五的浏览器中,能够间接创立SVG标签:

<html>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
        <polygon points="100,10 40,180 190,60 10,60 160,180"
          style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
    </svg>
</body>
</html>

那种艺术叫做内联SVG,有了那一个内联格局JavaScript就好调整得多了。

  • 不借助分辨率
  • 支撑事件管理器
  • 最契合带有大型渲染区域的应用程序(比如谷歌(谷歌(Google))地图)
  • 复杂度高会减慢渲染速度(任何过度施用 DOM 的利用都难过)
  • 不符合游戏使用

设置文本

textContent属性能够拿走和装置text成分文本:

// SVG
<text id="text" x="25" y="25" font-size="16" style="fill:rgb(0,0,0);">foo</text>;

// JS
<script>
    var text = document.getElementById( "text" );
    console.log( text.textContent ); // foo
    text.textContent = "Hello world!"; // 重新设置文本
</script>

Canvas

SVG基础以及选用Javascript DOM操作SVG,svgdom

SVG

  • 不依据分辨率
  • 支撑事件管理器
  • 最契合带有大型渲染区域的应用程序(譬喻谷歌(Google)地图)
  • 复杂度高会减慢渲染速度(任何过度施用 DOM 的采纳都难过)
  • 不符合游戏使用

Canvas

  • 依傍分辨率
  • 不协理事件管理器
  • 弱的公文渲染本领
  • 可见以 .png 或 .jpg 格式保存结果图像
  • 最符合图像密集型的娱乐,个中的成都百货上千对象会被频仍重绘

大意正是如此,假设你要采用SVG,应该思考是或不是更应有使用Canvas,并且还供给驾驭并不是全部浏览器都援救它,IE八或以下就不协助SVG,除此以外的现世浏览器包罗IE玖 基本都帮衬。IE它有和好的一套方案:VML,这些你和煦去搜寻相关材质。别的也足以经过设置插件使得其扶助SVG,举例adobe出品的svg viewer。

分组成分<g>

g成分能够对多个要素进行分组,使其更具语义化,并且有利于对分组里的成分进行联合管理,比方样式、动画等。

<g>
    <rect x="10" y="10" width="40" height="40" ry="10"/>
    <rect x="80" y="80" width="40" height="40" ry="10"/>
    <rect x="150" y="150" width="40" height="40" ry="10"/>
</g>

收获成分高宽和坐标

getBBox方法可以博得具备因素的高宽和坐标:

// SVG
<text id="text" x="25" y="25" font-size="16" style="fill:rgb(0,0,0);">foo</text>;

// JS
<script>
    var text = document.getElementById( "text" );
    console.log( text.getBBox() ); // {height: 16, width: 32, y: 11, x: 25} 
</script>

安装文本

textContent属性能够获得和安装text成分文本:

// SVG
<text id="text" x="25" y="25" font-size="16" style="fill:rgb(0,0,0);">foo</text>;

// JS
<script>
    var text = document.getElementById( "text" );
    console.log( text.textContent ); // foo
    text.textContent = "Hello world!"; // 重新设置文本
</script>

分组成分<g>

g元素可以对多少个成分进行分组,使其更具语义化,并且有利于对分组里的因素举办统1管理,例如样式、动画等。

<g>
    <rect x="10" y="10" width="40" height="40" ry="10"/>
    <rect x="80" y="80" width="40" height="40" ry="10"/>
    <rect x="150" y="150" width="40" height="40" ry="10"/>
</g>

在HTML中使用SVG

基础部分看W3SCHOOL的课程:,很轻松,花二十七分钟就足以扫完。

专门要留心SVG in HTML一些,它介绍了什么样在HTML中利用SVG,恐怕会相比较麻烦,庆幸的是在支撑HTML5的浏览器中,能够向来开立SVG标签:

<html>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
        <polygon points="100,10 40,180 190,60 10,60 160,180"
          style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
    </svg>
</body>
</html>

那种办法叫做内联SVG,有了这些内联格局JavaScript就好调整得多了。

杀鸡取蛋text文本排版难点

在SVG中对文件排版相比较发烧,你无法像HTML这样自由的把文件放到二个“矩形容器”(比方DIV)里,因为这个标签都以封闭的(在开始标签中张开破产)。轻易的做法是把文字和矩形设定到近似的坐标中,使其看起来是“一齐的”(难道那正是世界上最漫长的距离?):

<rect x="10" y="10" width="100" height="40" style="fill:rgb(255,255,255);stroke-width:1;stroke:rgb(0,0,0)"/>
<text x="35" y="35" font-size="16" style="fill:rgb(0,0,0);">text</text>;

 

眼看那种方法是很难管理,当小编想改动贰个职位的时候,作者必需把矩形和文件的地方都进展调治,今后只有多个成分幸而说,一旦多起来,那几乎就是惊恐不已的梦。而g成分能够帮大家消除那一个标题。

先把它们都停放3个g成分里,那样里面全数因素的岗位都是相对于这些g成分的,通过转移g成分的职分,能够达到规定的标准调度总体分组的职位的职能。但必要通过transform技巧使得,而不是x和y:

<g transform="translate(50,50)">
    <rect x="0" y="0" width="100" height="40" style="fill:rgb(255,255,255);stroke-width:1;stroke:rgb(0,0,0)"/>
    <text x="25" y="25" font-size="16" style="fill:rgb(0,0,0);">text</text>;
</g>

最近矩形和文件的x和y轴都是争执于g的地点来说的,translate(50,50)意味着 x="50", y="50" 那样应有很好掌握呢?

本文由68399皇家赌场发布于集成介绍,转载请注明出处:澳门皇家赌场SVG基础以及使用Javascript

关键词: 68399皇家赌场

最火资讯