SVG適應不一樣的情形

時間 2019-12-04

標籤 svg 適應不一樣情形简体版

原文原文鏈接

1、svg鋪滿全屏

今天設計給了一張svg的圖片作背景，可是通過兩個小時的糾結，發現就是沒法鋪滿元素，而後通過高人指點，發現是svg圖片的緣由，百度後果真能解決問題。javascript

解決：css

在webstorm裏面打開svg圖片，而後在svg標籤上面加上屬性：preserveAspectRatio="none meet";html

<svg width="1264px"    
 height="722px"    
 viewBox="0 0 1264 722"  
   version="1.1"    
 xmlns="http://www.w3.org/2000/svg"    
 xmlns:xlink="http://www.w3.org/1999/xlink"    
 preserveAspectRatio="none meet"
/>複製代碼

2、svg等比自適應java

SVG格式自己就是矢量圖形格式，能夠隨意縮放。可是若是若是整個畫面都是經過SVG進行搭建，同一個SVG圖形嵌入在HTML中，要同時知足多個分辨率屏幕的查看，仍是須要進行一些額外的設置，包括JS動態設置width、height等。 jquery

用戶在設計SVG圖形的初期，先要肯定該SVG圖形的大體畫面比例和查看方向，好比：該畫面是在手機上查看仍是Pad上查看仍是pc上；還有，容許該畫面只是上下滑動查看（對於高度遠大於寬度的狀況），仍是畫面只是左右滑動查看等。肯定了以上的信息，要設計一個能夠在多分辨率屏幕下自適應的SVG畫面，有如下幾個步驟 web

1.在SVG根標籤中添加 preserveAspectRatio="xMinYMin meet" 屬性該屬性指定SVG圖形在屏幕的最左上角開始顯示，而且保持等比縮放。 bash

2.在SVG跟標籤中添加 viewBox 屬性該屬性來設置SVG畫布的大小，但該大小是一個相對的大小，並非絕對尺寸大小。好比設定一個viewBox="0,0,800,3000"，能夠認爲將畫布大小的寬分爲800份，高分爲3000份，而後全部SVG的元素都在800*3000所分割成的畫布上擺放。這時候不用考慮屏幕實際高寬。再次提醒注意：viewBox將畫布分爲800*3000份的小格子，而後全部的元素在該畫布上擺放。至於該格子的絕對大小，則根據咱們後面所設定的width height單位來決定。webstorm

3.添加SVG元素。注意，各個SVG元素的高寬和xy座標都按照800*3000的大小來設置，也就是說若是想要在最右下角放一個100*100的矩形，那麼就應該寫成 <rect x="700" y="2900" width="100" height="100" fill="red" /> 咱們上面已經說過，這時候不用關心實際屏幕的高寬，只按照viewBox畫布大小進行設置。svg

4.調用JS函數動態設置svg元素的高寬，進行自適應調整。在這一步要肯定如何查看該畫面，對於該畫面800*3000，咱們設定爲只能上下滑動查看，左右固定寬度的方式。
函數

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FreezeWidth</title>
<link rel="stylesheet" href="screen.css">
<script type="text/javascript" src="../../js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="./screen.js"></script>
<script type="text/javascript">
    $(function() {
        var svgRootDom = $("#sketchpad")[0];
        adjustToFreezeWidth(svgRootDom);
    });
    
</script>
</head>
<body style="background-color: black;">
<svg id="sketchpad" preserveAspectRatio="xMinYMin meet" viewBox="0,0,3000,3000">
    <rect x="0" y="0" width="100%" height="100%" fill="green"/>
    <rect x="10" y="10" width="100" height="100" fill="orange" />
    <rect x="200" y="300" width="90" height="90" fill="orange" />
    <circle cx="400" cy="1500" r="50" fill="gray" />
    <rect x=700 y="2900" width="100" height="100" fill="blue" />
    
</svg>
</body>
</html>複製代碼

function adjustToFreezeWidth(rootSvg) {
    var windowWidth = $(window).width();
 
    var viewBoxVal = rootSvg.getAttribute("viewBox");
    var viewBoxWidth = viewBoxVal.split(",")[2];
    var viewBoxHeight = viewBoxVal.split(",")[3];
    rootSvg.removeAttribute("width");
    rootSvg.removeAttribute("height");
 
    var setWidth = windowWidth;
    var setHeight = (setWidth * viewBoxHeight) / viewBoxWidth;
    rootSvg.setAttribute("width", setWidth);
    rootSvg.setAttribute("height", setHeight);
}
 
function adjustToNone(rootSvg) {
 
    var viewBoxVal = rootSvg.getAttribute("viewBox");
    var viewBoxWidth = viewBoxVal.split(",")[2];
    var viewBoxHeight = viewBoxVal.split(",")[3];
    rootSvg.removeAttribute("width");
    rootSvg.removeAttribute("height");
 
    rootSvg.setAttribute("width", viewBoxWidth);
    rootSvg.setAttribute("height", viewBoxHeight);
 
}
 
function adjustToFreezeHeight(rootSvg) {
 
    var windowHeight = $(window).height();
 
    var viewBoxVal = rootSvg.getAttribute("viewBox");
    var viewBoxWidth = viewBoxVal.split(",")[2];
    var viewBoxHeight = viewBoxVal.split(",")[3];
    rootSvg.removeAttribute("width");
    rootSvg.removeAttribute("height");
 
    var setHeight = windowHeight;
    var setWidth = (setHeight * viewBoxWidth)/viewBoxHeight;
    rootSvg.setAttribute("width", setWidth);
    rootSvg.setAttribute("height", setHeight);
}
 
function adjustToFreezeAll() {
 
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    
    rootSvg.removeAttribute("width");
    rootSvg.removeAttribute("height");
 
    rootSvg.setAttribute("width", windowWidth);
    rootSvg.setAttribute("height", windowHeight);
 
}
--------------------- 
做者：食肉動物 
來源：CSDN 
原文：https://blog.csdn.net/kungstriving4/article/details/25186553 
版權聲明：本文爲博主原創文章，轉載請附上博文連接！複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。