js操作svg整體縮放

阿新 • • 發佈：2019-02-18

首先我們先建立一個svg整體佈局，程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <title>js操作svg實現整體縮放</title>
    <meta charset="utf-8">
</head>
<body>
    <svg id="svg" style="background:#FAFAFA;">
        <g id="svgPanel">
            <g id="grid"></g> 

            <circle fill="red" r="50" cx="100" cy="100"></circle>
        </g>
    </svg>
    <button onclick="zoom(1.1)">放大</button>
    <button onclick="zoom(0.9)">縮小</button>
</body>
</html>

js程式碼來控制svg整體的大小並且利用svg來繪製背景網格：

<script type="text/javascript" 
>
    var svg = document.getElementById("svg");
    var svgPanel = document.getElementById("svgPanel");
    var gridSvg = document.getElementById("grid");
    var width = 800;  //設定svg整體的寬和高
    var height = 400;
    var gridLength = 20; //定義網格的大小

    svg.setAttribute("width",width);
    svg.setAttribute("height" 
,height);

    //繪製網格
    drawGrid(gridSvg,width,height,gridLength);

    /**
     * 繪製網格     
     * @param {Object} svgBackground 繪製網格物件
     * @param {Int} winWidth 區域寬度
     * @param {Int} winHeigth 區域高度
     * @param {Int} gridLength 網格大小
     */
    function drawGrid(svgBackground,winWidth,winHeight,gridLength) {
        var childs = gridSvg.childNodes;
        //刪除之前的網格節點，便於重繪
        for (var i = childs.length - 1; i >= 0; i--) {
            svgBackground.removeChild(childs.item(i));
        }
        for (var i = 0, len = Math.ceil(winWidth / gridLength); i <= len; i++) {
            var attrs = {
                x1: i * gridLength,
                y1: 0,
                x2: i * gridLength,
                y2: winHeight,
                stroke: "#ddd"
            };
            var line = resetSVG("line", attrs);
            svgBackground.appendChild(line);
        };                                                                                                                                                         
        for (var i = 0, len = Math.ceil(winHeight / gridLength); i <= len; i++) {
            var attrs = {
                x1: 0,
                y1: i * gridLength,
                x2: winWidth,
                y2: i * gridLength,
                stroke: "#ddd"
            };
            var line = resetSVG("line", attrs);
            svgBackground.appendChild(line);
        };
    }

    /**
     * js建立svg元素        
     * @param {String} tag svg的標籤名
     * @param {Object} svg元素的屬性
     */
    function resetSVG(tag, attrs) {
        var element = document.createElementNS('http://www.w3.org/2000/svg', tag);
        for (var k in attrs) {
            element.setAttribute(k, attrs[k]);
        }
        return element;
    }

    /**
     * svg放縮
     * {Float} num 放縮的倍數
     */
    function zoom(num){
        scale *= num;
        svgPanel.setAttribute("transform","scale("+scale+")");
    }
</script>

這樣我們就可以實現svg的整體放縮了，如下圖：

整體放縮圖片

當我們縮小時，背景網格也跟著縮小而不能填充整個畫板，這不是我們想要的，做一下改動，修改zoom函式如下：

/**
 * svg放縮
 * {Float} num 放縮的倍數
 */
function zoom(num){
    scale *= num;
    svgPanel.setAttribute("transform","scale("+scale+")");
    drawGrid(gridSvg,width*(1/scale),height*(1/scale),gridLength);
}

每次放縮都重繪svg網格，這樣就可以了：

重繪svg網格

然後我們繫結滑鼠滑輪事件來實現縮放，程式碼如下：


//繫結滑鼠滑輪事件
if(document.addEventListener){                                
    document.addEventListener('DOMMouseScroll',scrollZoom,false);
}
window.onmousewheel=document.onmousewheel=scrollZoom;

/**
 * 滑輪滾動處理事件，向上滾放大
 * {Object} e 事件物件
 */
function scrollZoom(e){
    e=e || window.event;
    //e.detail用來相容 FireFox
    e.wheelDelta>0 || e.detail >0?zoom(1.1):zoom(0.9);
}

效果如下：
滑輪滾動縮放

示例下載：點選這裡

js操作svg整體縮放

首先我們先建立一個svg整體佈局，程式碼如下： <!DOCTYPE html> <html> <head> <title>js操作svg實現整體縮放</title> <met

Js圖片等比例縮放

tail wid display 圖片等比例縮放 nbsp function document fun splay <img src="chargein_cashgift_detail.png" class="img" > function sh

rem佈局實現不同解析度移動終端的自適應、整體縮放

前言現在手機螢幕解析度越來越多，但我們的需求比較唯一——最佳視覺。當用戶瀏覽網頁時，根據螢幕的尺寸，來向用戶展示更適合使用者的佈局、文字、圖片、按鈕等等，因此，rem應運而生。 rem（font size of the root element）是指相對於根元素的字型

使用js還原瀏覽器的縮放

移動端，使用手機瀏覽器開啟一個網頁，雙指可以進行網頁的縮放，非常方便 1：縮放前 2：縮放後 3：有沒有一種方法，可以還原到原始狀態呢。目前發現一種方法，動態修改viewport,head 中增加標籤 <meta name="viewport" id=

WPF 的Canvas畫圖區整體縮放

WPF物件都具有RenderTransform的屬性，可以通過設定RenderTransform來對WPF的元素進行變換，無論是控制元件還是形狀都可以變換。如果採用Canvas作為畫板來繪製一些形狀，想要通過滑鼠或觸控操作來進行放大或縮小，那麼不能簡單地對canvas進行

WPF 的Canvas畫圖區整體縮放與平移（二）

WPF物件都具有RenderTransform的屬性，可以通過設定RenderTransform來對WPF的元素進行變換，無論是控制元件還是形狀都可以變換。典型的變換包括縮小放大與平移。（一）縮放（二）平移為了實現平移，這裡以按下滑鼠中間鍵並移動滑鼠作為事件觸

HTML 整體縮放

最近用到web 控制元件載入網頁需要縮放問題，由於控制元件比較舊，所以只能從html 入手；html 頁面縮放主要有兩種，IE 可使用 CSS body{zoom:1.2;} 或者微軟相關的控制元件支援，包括BCB 。其它瀏覽器可使用 body{transform:

CSS+JS實現圖片無縮放旋轉

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

div/dom元素拖拽縮放外掛，純js實現拖拽縮放，不依賴jQuery~

產品需求，需要用到對div（dom）進行拖拽縮放操作，看到有好多外掛，要麼依賴jQuery，要麼檔案太大。封裝了一個外掛，不壓縮狀態下5KB。 html <!DOCTYPE html> <html lang="en"> <head> <

如何使用 SVG 進行縮放和平移

本主題演示瞭如何使用可縮放的向量圖形 (SVG) 進行縮放和平移，並在結尾處提供了一個可進行縮放和平移的複雜組織結構圖示例。假定你掌握了基本的 HTML 和 JavaScript 知識，並能訪問可在 HTML5 中呈現內聯 SVG 的瀏覽器（如 Windows Internet Explorer 9）。

D3.js中初始化縮放比例

總結一下，上次忘記了我們使用d3將頁面資料全部載入後，可能看起來不怎麼協調，我們需要有個初始化縮放，如何進行初始化縮放呢？滑輪brush： .call(brush.move, [150,2

arcgis for js 根據多邊形自動縮放

bsp var single 根據渲染 style ret arcgis 幾何交代背景：多邊形已經渲染在圖層上，然後根據多邊形自動縮放值合適的大小；思路：獲取圖層信息，獲取圖層中的幾何信息，獲取圖形範圍信息，在地圖上設置範圍；(下面的方法有封裝）記一下思路就好 va

D3.js 使用縮放zoom時節點無法拖動，只能整體移動的問題

func blank on() sta blog function targe light event .on("dragstart", function() { d3.event.sourceEvent.stopPropagation();

用d3.js對訊號處理的結果資料作圖，得到可縮放互動的動態SVG圖

d3.js 有何用 D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s

d3.js 實現svg 縮放平移旋轉

使用d3.js的時候，可能會需要對生成svg物件進行平移，旋轉，縮放等操作可以使用矩陣變換來進行座標系下的轉化，但是矩陣運算相對複雜。d3提供了相應的svg變換介面。包括： translate() , scale() , rotate() , skewX() , an

js頁面百分比縮放

fontsize resize 百分比 light () chan logs tlist scrip <script> var docEl = document.documentElement, resizeEvt = ‘

理解SVG圖片標簽的viewport、viewBox、preserveAspectRatio縮放

500px 寬度 eas 寬高理解技術 eight 例子 col 一、viewport 　　表示SVG可見區域的大小，或者可以想象成舞臺大小，畫布大小。 <svg width="500" height="300"></svg> 　　上面的SV

js仿百度地圖拖拽、縮放、添加圖層功能（原創）

ets tle clas 火狐相對 inner tlist posit css 最近項目中完成的需求，仿百度地圖中的功能：要求：1.底層圖可以拖拽、縮放。　　 2.拖拽一個圖標，在底層圖上對應位置添加一個標註點，該標註點位置要隨底層圖移動。　　　3.添加的標註

基於高德地圖的描點操作，監聽地圖縮放，展示合理數量的marker

js實現移動端圖片預覽：手勢縮放，手勢拖動，雙擊放大...

在屏幕上 turn cit format 基礎上 set 邊距點擊點擊事件前言本文將介紹如何通過js實現移動端圖片預覽，包括圖片的預覽模式，手勢縮放，手勢拖動，雙擊放大等基本功能；

js操作svg整體縮放

相關推薦