成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS 操作svg畫圖

番茄西紅柿 / 1476人閱讀

摘要：有一個(gè)圖，使用標(biāo)簽，引入到了文件中文件華東地區(qū)手機(jī)個(gè)月的數(shù)據(jù)柱狀圖文件中然后使用文件來操縱，插入圖形?？墒?，一般情況下，不建議混在一起使用，比如我這里的圖就是多帶帶一個(gè)文件，然后使用插入到中的。最后的，是文件中，標(biāo)簽的新的節(jié)點(diǎn)，。

背景：

一共有3個(gè)文件：svg文件，html文件，js文件。

有一個(gè)svg圖，使用embed標(biāo)簽，引入到了html文件中

svg文件：



    SVG 華東地區(qū)手機(jī)12個(gè)月的數(shù)據(jù) 柱狀圖

HTML文件中：


    id="embed" width="640" height="400"
           type="image/svg+xml">

然后使用js文件來操縱svg，插入圖形。

第一個(gè)攔路虎：獲得svg  dom，

如果你的svg是直接寫在html文件中，那么，svg和HTML共用一個(gè)document，可以直接通過document.getElementById(svg的id)就可以獲得。

可是，一般情況下，不建議混在一起使用，比如我這里的column圖就是多帶帶一個(gè)svg文件，然后使用embed插入到HTML中的。

注意：使用embed、object插入的svg文件，其有完全屬于自己的document：

 

此時(shí)，再想拿到svg, 則需要使用：getSVGDocument()；

使用方法： 先拿到embed節(jié)點(diǎn)，再拿svg document，再拿svg節(jié)點(diǎn)：

function drawColumn(data) {
    var nameSpace = http://www.w3.org/2000/svg;
    var max = Math.max.apply(null, data);
    var proportion = 350/max;
    var interval = 35; //column間隔
    var columnStyle = stroke: blue; fill: orange;
    var embedSVG = document.getElementById(embed).getSVGDocument().getElementById(svgColumn);

//關(guān)鍵代碼：embedSVG的賦值。最后的getElementById(svgColumn)，是svg文件中，svg標(biāo)簽的id
    for (let singleColumn of data) {
        var rect = document.createElementNS(nameSpace,rect);//creat新的svg節(jié)點(diǎn)，rect。
        rect.style = columnStyle; //給rect節(jié)點(diǎn)設(shè)置style
        height = singleColumn*proportion;
        rect.setAttribute(width, 30); //使用setAttribute來設(shè)置rect節(jié)點(diǎn)屬性
        rect.setAttribute(height, height);
        rect.setAttribute(x, interval);
        rect.setAttribute(y, 380-height);
        embedSVG.appendChild(rect); //將這個(gè)新的rect節(jié)點(diǎn) 添加到svg節(jié)點(diǎn)里
        interval += 45
    }
}

注意：

此外，不同于HTML元素對象可以直接對一些屬性賦值，SVG元素對象都需要通過調(diào)用setAttribute()方法來設(shè)定屬性值。

使用 rect.width = 30 不起作用。

 

參考鏈接：http://blog.iderzheng.com/something-about-svg-with-javascript/

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/2011.html

相關(guān)文章

  • D3.js可視化前端框架的使用要點(diǎn)

    摘要：該事件不會區(qū)分字母的大小寫，例如和被視為一致。這些布局的作用都是將某種數(shù)據(jù)轉(zhuǎn)換成另一種數(shù)據(jù)，而轉(zhuǎn)換后的數(shù)據(jù)是利于可視化的。而有元素與數(shù)據(jù)對應(yīng)的部分稱為。 1.安裝

    MASAILA 評論0 收藏0

  • echarts 與 highcharts

    摘要：渲染能力采用渲染除了對使用，一般來說，更適合繪制圖形元素?cái)?shù)量非常大這一般是由數(shù)據(jù)量大導(dǎo)致的圖表如熱力圖地理坐標(biāo)系或平行坐標(biāo)系上的大規(guī)模線圖或散點(diǎn)圖等，也利于實(shí)現(xiàn)某些視覺特效如交通圖。 一．簡介 echartsecharts是百度公司前端開發(fā)的一個(gè)圖表庫，2013年發(fā)布第一版，主要采用canvas畫圖，目前版本3.8.4；完全免費(fèi)； highcharthighcharts是國外的一家公司...

    王笑朝 評論0 收藏0

  • Svg初學(xué)總結(jié)

    摘要：原來使用插件來畫圖發(fā)現(xiàn)還是用實(shí)現(xiàn)的，打算學(xué)習(xí)了解一下，以下都是可直接在插入。和屬性可使矩形產(chǎn)生圓角。同時(shí)是基于矢量的，所以它能夠很好的處理圖形大小的改變 原來使用js插件來畫圖highchart.js,發(fā)現(xiàn)還是用svg實(shí)現(xiàn)的，打算學(xué)習(xí)了解一下，以下都是可直接在html插入。支持瀏覽器：Internet Explorer9，火狐，谷歌Chrome，Opera和Safari 什么是SVG？...

    gself 評論0 收藏0

  • d3.js實(shí)現(xiàn)svg縮放功能

    摘要：本文代碼轉(zhuǎn)載自，通過實(shí)現(xiàn)縮放很簡單，但是滾輪和按鈕能夠完美縮放就不那么容易了，如果有對感興趣的小伙伴可以參考下面代碼。構(gòu)造一個(gè)新的縮放行為。指定當(dāng)前的縮放平移向量為如果未指定，返回當(dāng)前平移向量，默認(rèn)。 本文代碼轉(zhuǎn)載自Stack Overflow，通過d3.js實(shí)現(xiàn)縮放很簡單，但是滾輪和按鈕能夠完美縮放就不那么容易了，如果有對d3感興趣的小伙伴可以參考下面代碼。 JSFiddle地址: ...

    劉玉平 評論0 收藏0

  • d3.js實(shí)現(xiàn)svg縮放功能

    摘要：本文代碼轉(zhuǎn)載自，通過實(shí)現(xiàn)縮放很簡單，但是滾輪和按鈕能夠完美縮放就不那么容易了，如果有對感興趣的小伙伴可以參考下面代碼。構(gòu)造一個(gè)新的縮放行為。指定當(dāng)前的縮放平移向量為如果未指定，返回當(dāng)前平移向量，默認(rèn)。 本文代碼轉(zhuǎn)載自Stack Overflow，通過d3.js實(shí)現(xiàn)縮放很簡單，但是滾輪和按鈕能夠完美縮放就不那么容易了，如果有對d3感興趣的小伙伴可以參考下面代碼。 JSFiddle地址: ...

    guqiu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<