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

資訊專欄INFORMATION COLUMN

JS 操作svg畫圖

番茄西紅柿 / 1426人閱讀

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

背景：

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

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

svg文件：



    SVG 華東地區手機12個月的數據 柱狀圖

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節點，再拿svg document，再拿svg節點：

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);

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

注意：

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

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

 

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/2011.html

相關文章

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

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

    MASAILA 評論0 收藏0

  • echarts 與 highcharts

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

    王笑朝 評論0 收藏0

  • Svg初學總結

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

    gself 評論0 收藏0

  • d3.js實現svg縮放功能

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

    劉玉平 評論0 收藏0

  • d3.js實現svg縮放功能

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

    guqiu 評論0 收藏0

發表評論

0條評論

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