国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JS 操作svg畫圖

番茄西紅柿 / 1400人閱讀

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

背景：

一共有3個文件：svg文件，html文件，js文件。

有一個svg圖，使用embed標簽，引入到了html文件中

svg文件：



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

HTML文件中：


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

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

第一個攔路虎：獲得svg  dom，

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

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

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

 

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

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

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標簽的id
    for (let singleColumn of data) {
        var rect = document.createElementNS(nameSpace,rect);//creat新的svg節(jié)點，rect。
        rect.style = columnStyle; //給rect節(jié)點設(shè)置style
        height = singleColumn*proportion;
        rect.setAttribute(width, 30); //使用setAttribute來設(shè)置rect節(jié)點屬性
        rect.setAttribute(height, height);
        rect.setAttribute(x, interval);
        rect.setAttribute(y, 380-height);
        embedSVG.appendChild(rect); //將這個新的rect節(jié)點 添加到svg節(jié)點里
        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://specialneedsforspecialkids.com/yun/2011.html

相關(guān)文章

  • D3.js可視化前端框架的使用要點

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

    MASAILA 評論0 收藏0

  • echarts 與 highcharts

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

    王笑朝 評論0 收藏0

  • Svg初學總結(jié)

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

    gself 評論0 收藏0

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

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

    劉玉平 評論0 收藏0

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

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

    guqiu 評論0 收藏0

發(fā)表評論

0條評論

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