SVG 视野概念（二）

最新推荐文章于 2024-04-18 05:38:15 发布

卡尔特斯

最新推荐文章于 2024-04-18 05:38:15 发布

阅读量162

点赞数

分类专栏： SVG 文章标签： svg

本文链接：https://blog.csdn.net/zz00008888/article/details/121102173

版权

SVG 专栏收录该内容

22 篇文章 3 订阅

订阅专栏

一、简介

SVG 视窗、世界、视野的概念
- width、height - 控制视窗（控件大小）
- SVG 代码 - 定义世界（显示内容）
- viewBox、preserveAspectRatio - 控制视野（在控件大小内的可视区域）
```
<svg
  xmlns="http://www.w3.org/2000/svg"
  width="1000"
  height="1000"
  viewBox="0 0 400 400"
  preserveAspectRatio="xMinYMin meet"
  
>
```

preserveAspectRatio 取值范围示例：

<!-- preserveAspectRatio - Align -->
<select>
  <option value="none">none</option>
  <option value="xMinYMin">xMinYMin</option>
  <option value="xMidYMin">xMidYMin</option>
  <option value="xMaxYMin">xMaxYMin</option>
  <option value="xMinYMid">xMinYMid</option>
  <option value="xMidYMid">xMidYMid</option>
  <option value="xMaxYMid">xMaxYMid</option>
  <option value="xMinYMax">xMinYMax</option>
  <option value="xMidYMax">xMidYMax</option>
  <option value="xMaxYMax">xMaxYMax</option>
</select>

<!-- preserveAspectRatio - meetOrSlice -->
<select>
  <option value="meet">meet</option>
  <option value="slice">slice</option>
</select>

二、案例

SVG 可视区域效果

<!-- svg画布大小 === 可视范围 -->
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" style="background-color: green;">
  <rect x="0" y="0" width="50" height="50" fill="red"/>
</svg>
<!-- svg画布大小 < 可视范围 -->
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 400 400" style="background-color: green;">
  <rect x="0" y="0" width="50" height="50" fill="red"/>
</svg>
<!-- svg画布大小 > 可视范围 -->
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 100 100" style="background-color: green;">
  <rect x="0" y="0" width="50" height="50" fill="red"/>
</svg>

SVG 可视区域 preserveAspectRatio 配置效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 可视区域效果 + preserveAspectRatio -->
  <h3>可视区域效果 + preserveAspectRatio + viewBox</h3>
  <!-- 配置区域 -->
  <span>preserveAspectRatio - </span>
  <span>align:</span>
  <select id="align" onchange="onAlignChange(this)">
    <option value="none">none</option>
    <option value="xMinYMin" selected>xMinYMin</option>
    <option value="xMidYMin">xMidYMin</option>
    <option value="xMaxYMin">xMaxYMin</option>
    <option value="xMinYMid">xMinYMid</option>
    <option value="xMidYMid">xMidYMid</option>
    <option value="xMaxYMid">xMaxYMid</option>
    <option value="xMinYMax">xMinYMax</option>
    <option value="xMidYMax">xMidYMax</option>
    <option value="xMaxYMax">xMaxYMax</option>
  </select>
  <span>meetOrSlice:</span>
  <select id="meetOrSlice" onchange="onMeetOrSliceChange(this)">
    <option value="meet">meet</option>
    <option value="slice">slice</option>
  </select>
  <div style="margin-top: 10px;">
    <span>viewBox - </span>
    x：<input type="number" value="0" placeholder="x" onchange="onChangeX(this)" style="width: 50px;">
    y：<input type="number" value="0" placeholder="y" onchange="onChangeY(this)" style="width: 50px;">
    width：<input type="number" value="200" placeholder="width" onchange="onChangeWidth(this)" style="width: 50px;">
    height：<input type="number" value="200" placeholder="height" onchange="onChangeHeight(this)" style="width: 50px;">
  </div>
  <!-- 画布 -->
  <div style="margin-top: 20px;">
    <!-- svg画布-->
    <svg id="svg" xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 200 200" preserveAspectRatio="none meet" style="background-color: green;">
      <rect id="rect" x="0" y="0" width="200" height="200" fill="red"/>
    </svg>
  </div>
  <!-- JS 切换配置 -->
  <script>
    // 默认配置
    var alignType = 'xMinYMin'
    var meetOrSliceType = 'meet'
    var x = 0
    var y = 0
    var width = 200
    var height = 200
    // 监听切换
    function onAlignChange (e) {
      // 记录
      alignType = e.value
      // 更新
      reloadUI()
    }
    function onMeetOrSliceChange (e) {
      // 记录
      meetOrSliceType = e.value
      // 更新
      reloadUI()
    }
    function onChangeX (e) {
      // 记录
      x = e.value
      // 更新
      reloadUI()
    }
    function onChangeY (e) {
      // 记录
      y = e.value
      // 更新
      reloadUI()
    }
    function onChangeWidth (e) {
      // 记录
      width = e.value
      // 更新
      reloadUI()
    }
    function onChangeHeight (e) {
      // 记录
      height = e.value
      // 更新
      reloadUI()
    }
    // 组装赋值
    function reloadUI () {
      // 组装
      var viewBox = [x, y, width, height].join(' ')
      var preserveAspectRatio = [alignType, meetOrSliceType].join(' ')
      // 赋值
      svg.setAttribute('viewBox', viewBox)
      svg.setAttribute('preserveAspectRatio', preserveAspectRatio)
      rect.setAttribute('x', x)
      rect.setAttribute('y', y)
      rect.setAttribute('width', width)
      rect.setAttribute('height', height)
    }
    // 初始化
    reloadUI()
  </script>
</body>
</html>

卡尔特斯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
SVG 视野概念（二）

SVG 视窗、世界、视野的概念width、height - 控制视窗（控件大小）SVG 代码 - 定义世界（显示内容）viewBox、preserveAspectRatio - 控制视野（在控件大小内的可视区域）<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 400 400" preserveAspectRatio="xMinYMin meet..
复制链接

扫一扫