开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

设置Viewbox以使内联SVG“捕捉”到包含元素的大小？

SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，可以通过设置Viewbox来实现内联SVG“捕捉”到包含元素的大小。

Viewbox是SVG中的一个属性，用于定义SVG元素的可视区域和坐标系统。通过设置Viewbox，可以控制SVG元素在父容器中的显示大小和位置。

要设置Viewbox以使内联SVG“捕捉”到包含元素的大小，可以按照以下步骤进行操作：

首先，确保SVG元素被正确嵌入到HTML文档中，并且可以通过CSS选择器或JavaScript获取到该元素。
获取包含SVG元素的父容器的大小。可以使用JavaScript的方法获取父容器的宽度和高度，例如使用clientWidth和clientHeight属性。
根据父容器的大小，设置Viewbox属性的值。Viewbox属性的值是一个包含四个参数的字符串，分别表示可视区域的左上角x坐标、左上角y坐标、宽度和高度。可以根据父容器的大小来计算这些参数的值。
将计算得到的Viewbox属性值设置给SVG元素。可以使用JavaScript的方法将属性值设置给SVG元素，例如使用setAttribute方法。

以下是一个示例代码，演示如何设置Viewbox以使内联SVG“捕捉”到包含元素的大小：

<!DOCTYPE html>
<html>
<head>
  <style>
    .svg-container {
      width: 300px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="svg-container">
    <svg id="my-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
      <!-- SVG内容 -->
    </svg>
  </div>

  <script>
    // 获取父容器的大小
    var container = document.querySelector('.svg-container');
    var containerWidth = container.clientWidth;
    var containerHeight = container.clientHeight;

    // 设置Viewbox属性值
    var viewboxValue = '0 0 ' + containerWidth + ' ' + containerHeight;

    // 设置Viewbox属性给SVG元素
    var svgElement = document.getElementById('my-svg');
    svgElement.setAttribute('viewBox', viewboxValue);
  </script>
</body>
</html>

在上述示例代码中，首先通过CSS设置了父容器的宽度和高度为300px和200px。然后使用JavaScript获取到父容器的宽度和高度，并计算得到Viewbox属性的值。最后将计算得到的Viewbox属性值设置给SVG元素。

通过以上步骤，就可以设置Viewbox以使内联SVG“捕捉”到包含元素的大小。这样，SVG元素将根据父容器的大小进行缩放和显示，确保完整地展示在父容器中。

腾讯云相关产品和产品介绍链接地址：

腾讯云SVG图像处理：https://cloud.tencent.com/product/tci
腾讯云云服务器CVM：https://cloud.tencent.com/product/cvm
腾讯云云原生容器服务TKE：https://cloud.tencent.com/product/tke
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云云存储COS：https://cloud.tencent.com/product/cos
腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
腾讯云人工智能服务：https://cloud.tencent.com/product/ai

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

将 SVG 与媒体查询结合使用

我们还可以使用 CSS 来调整元素的stroke，即 SVG 形状的轮廓。即使未stroke设置任何属性，也存在形状的笔触。让我们给我们的圆一个十像素宽的深蓝色虚线边框。...这意味着我们可以使用 CSS 来设置它们的值： <style type...SVG 元素的计算大小还取决于：根 SVG 元素的计算width和height 根元素的viewBox属性值应用于元素或其祖先的任何缩放变换换句话说，我们的角元素是(20, 50)，(...> 我们的文档包含两个星形多边形元素，每个元素的类名都是star。...当超过 320 像素时，viewBox恢复到其初始值。由于此技术使用onload事件属性或SVGLoad事件，因此将我们的 CSS 和 JavaScript 嵌入到 SVG 文件中是个好主意。

6.2K0 0

SVG精髓阅读笔记

矩形在网页中使用SVG SVG作为图像,作为图像,作为CSS背景,作为对象,内联SVG SVG的坐标系统视口,文档使用的画布区域称为视口,单位可以em,默认字体大小,ex 字母x的高度...x坐标,最小y坐标,宽度和高度下面一行代码是在4厘米*5厘米的图纸上,设置每厘米16个单位的坐标系统 ... 属性viewBox的宽高比可以不同于视口的宽高比,在这种情况下SVG可以做三件事 1:按较小的尺寸等比例缩放图形,以使图形完全填充视口, 2:按较大的尺寸等比例缩放图形并裁剪掉超出视口的部分...Svg支持嵌套的坐标系统将一个svg元素插入到一个新的文档中 Svg中的基本形状线段笔画特性:stroke-width 笔画颜色stroke...>可以包含一个完整的svg或者栅格文件,

1.4K2 0

网页中如何使用SVG

svg-use.gif 将SVG作为图像 1. 将图像包含在 HTML 标记的元素内当图像是页面的基本组成部分时，推荐这种方式。...对于 SVG，则： ① 如果文件中的根元素带有明确的 height 和 width 属性，则它们会被用作文件的固有尺寸； ② 如果只指定 height 或者 width ，并且 ...带有 viewBox 属性，那么将用 viewBox 计算宽高比，图像会被缩放已匹配指定的尺寸； ③ 如果带有 viewBox 属性而没有尺寸，则 viewBox 的 height 和...根据浏览器以及用户的安全设置不同，SVG 文件内定义的脚本也可能不会运行，URL #片段也可能被忽略（见上述示例）将SVG作为对象 <object data="radar.<em>svg</em>" type="image...<em>内联</em> <em>SVG</em>

1.2K0 0

网页中如何使用SVG

将SVG作为图像 1. 将图像包含在 HTML 标记的元素内当图像是页面的基本组成部分时，推荐这种方式。...对于 SVG，则： ① 如果文件中的根元素带有明确的 height 和 width 属性，则它们会被用作文件的固有尺寸； ② 如果只指定 height 或者 width ，并且带有 viewBox...属性，那么将用 viewBox 计算宽高比，图像会被缩放已匹配指定的尺寸； ③ 如果带有 viewBox 属性而没有尺寸，则 viewBox 的 height 和 width 将被视为像素长度。...根据浏览器以及用户的安全设置不同，SVG 文件内定义的脚本也可能不会运行，URL #片段也可能被忽略（见上述示例）将SVG作为对象 <object data="radar.<em>svg</em>" type="image...<em>内联</em> <em>SVG</em> circle>

1.9K1 0

SVG学习笔记，持续记录。

1.viewBox 用于在实际的svg上截取一小块，放大到整个svg显示，属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度。...如果不指定width属性和height属性，只指定viewBox属性，则相当于只给定 SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小。...不指定大小时，但是指定了viewBox时，svg元素的大小等于父容器的大小，viewBox按照父容器大小进行截取。不指定大小，也没有指定viewBox，svg大小默认为300*150。...,pattern,svg,switch和symbol)和图形元素都可以包含desc和title元素，这两个元素都是辅助性的元素，用于解释相关情境；它们的内容都是文本。...动画搭配css3的动画，也可以使用svg专有的动画标签元素。

2.9K4 0

一篇文章带你了解SVG 图标

但是，在显示SVG图标时，使用HTML的img元素来显示图标是最容易的，HTML img元素可以轻松地放大和缩小SVG图标的大小。...SVG图标只是包含在它自己的SVG文件中的SVG图像。下面是一个非常简单的圆形图标，由SVG circle元素组成： <!...但是，当使用img元素显示此SVG图标，并放大和缩小img元素的大小时，SVG图标不会放大或缩小。相反，或多或少会显示SVG画布。下面是将img CSS Height属性设置为32。...SVG viewBox属性指定应显示多少SVG画布（在X和Y方向上）。如何只显示SVG画布的包含圆圈图标的部分？只想显示SVG画布的包含圆圈图标的部分。...该区域从点0,0延伸到点128,128（圆的半径为64，以64，64为中心）。使用SVG Viewbox属性，可以指定只渲染SVG画布的这一区域。下面是设置了Viewbox值的SVG圆图标的外观。

4.4K3 0

评价打分组件，SVG 半颗星的解决方案！

-- Content --> 在该SVG中，我们需要在元素中包含path数据。根据MDN: symbol 元素用于定义图形模板对象，可以通过元素来实例化。.../svg" viewBox="0 0 32 32" id="star"> 有了这个设置，我们现在可以用...好吧，多亏了 SVG，我们可以在中包含多个元素。...第一种方法到这就介绍完了，我们来看第二种方法。带有SVG渐变的半星与mask类似，我们需要在元素中定义一个渐变。...大小通过使用CSS变量并确保SVG具有正确的viewBox属性，我们可以轻松地调整它们的大小。

6931 0

svg.js教程及使用手册详解（一）

SVG.js中包含了大量用于定义动画的方法，如移动、缩放、旋转、倾斜等，具体可参阅相关演示。 ...SVG.js中的一些亮点：易读的简洁的语法非常轻量，gzip压缩版只有5k 针对大小、位置、颜色等的动画元素模块化结构，轻松扩展各种实用插件各种形状类型间拥有统一的API....draw = SVG('canvas').size(300, 300) var rect = draw.rect(100, 100).attr({ fill: '#f06' }) 其中SVG()中的参数可以使一个元素的...> 当然，要定义SVG画布的大小，除了使用像素之外，也可以使用百分比的。...() viewbox() 方法可以有zoom属性， var box = draw.viewbox() var zoom = box.zoom 如果viewbox中的的大小和实际的SVG画布的大小相同

8.3K2 0

使用CSS提高网站性能的30种方法

在可行的情况下，您可以将SVG直接内联到CSS代码中： .svgbackground { background: url('data:image/svg+xml;utf8,<svg xmlns="https...15.使用CSS设置SVG样式直接将SVG代码嵌入到HTML中通常更有用和有效，例如。...后续页面加载可以使用缓存的样式表，因此内联CSS是不必要的，并且会降低性能。如果您有一个小型站点，可以可靠地自动化构建过程，或者有一个单页应用程序，请考虑关键的CSS。...该集装箱属性支持以空格分隔的列表形式显示以下一个或多个值： none：无包含（默认） layout：将元素与页面的其余部分隔离：其内容不会影响其他元素的布局 paint：将元素裁剪为特定大小而不出现任何可见溢出...组件仍然可以显示shadow：part元素，因此可以进行有限的外部样式设置。

3.4K2 0

我至今没想到，我也能在 CSS 中实现 SVG 动画了

SVG 与 HTML 类似，我们可以使用 XML语法定义 SVG 元素，并使用 CSS 对它们进行样式上的设置，你把它们当做是 HTML 一样就行。...元素及其属性 HTML 和 SVG 之间的另一个重要区别是我们如何定位元素，特别是通过给定的外部元素的 viewBox 属性。...其中，x1 和 y1 代表直线的起点坐标，而 x2 和 y2 代表直线的终点坐标。你会发现我使用相对单位 % 来设置位置，这是一种确保图像内容调整大小以适应包含 SVG 元素的简单方法。...注意，我们对 SVG 元素应用了 CSS 类，应用了一些基本样式。在这个样式中，我们设置了元素的大小，并更改光标类型以表明它是可单击的。...; } SVG 动画的起点接着上面一节，现在整洁的 SVG 包含一个元素，该元素包含三个元素。

1.2K1 0

强大的 vite 居然不支持内 SVG 转 Base64 内嵌？

我发现使用库模式（打包成 index.es.js，使用该模式需要设置 build.lib 配置）时，是不会出现 SVG 文件的。...如果你指定了 build.lib，那么 build.assetsInlineLimit 将被忽略，无论文件大小或是否为 Git LFS 占位符，资源都会被内联。...后来我用最新版的 vite 构建了一个新的 Vue 项目。发现它这个官方给的 demo 打包出来的文件 SVG 都没做内联。...他说他不赞成 SVG 转成 Base64 嵌入到 HTML，SVG 是个文本类的特殊图片格式，不是二进制，没必要再转一层 Base64，导致体积变大。...id，来修改 SVG 最终展示的 viewBox。

5242 0

利用属性选择器对外部链接进行样式设计

例如，我们可以为具有 hidden 属性的任何元素设置 display 属性为 none： [hidden] { display: none; } 我们还可以在属性等于特定值时设置元素的样式。...因此，我们可以只为以 http 开头的链接设置样式，通过在我们的属性选择器中插入一个 ^ 字符： a[href^='http'] { /* 外部链接的样式 */ } 或者我们可以使用其他运算符来确定不同的样式条件...' s] { } /* 不区分大小写 */ a[href*='css-irl' i] { } 设置伪元素的样式对于我们的外部链接，我们将通过设置伪元素的样式来附加一个图标。...我们可以设置宽度和高度（以 em 为单位，它们相对于字体大小），并使用 background-size 确保我们的 SVG 覆盖整个区域。...目前，图标可能会换行到文本的下一行，留下一个不受欢迎的孤立图标。如果我们对伪元素添加 position: absolute，并对锚元素添加一些右侧填充，则图标将不会单独换行。

1211 0

SVG 入门指南(看完,对SVG结构不在陌生)

绘图的颜色是表现的一部分，表现信息包含在 style 属性中，这里的轮廓颜色为黑色，填充颜色为 none 以使猫的脸部透明。...在网页中使用 SVG SVG 是一种图件格式，因此可以使用与其他图像类型相同的方式包含在 HTML 页面中。...在元素内包含 SVG 在元素内包含 SVG 图像非常简单，只需设置 src 指向 SVG 文件位置即可。...如下: 在 CSS 中包含 SVG 可以使用 background-image 属性来显示 SVG，如果没有固有尺寸， SVG 会被缩放为元素高度和宽度的...color 是用来给 HTML 的文本设置颜色的，会被子元素继承，但对 SVG 没有直接效果。

2.7K2 0

SVG 入门指南(初学者入门必备)

绘图的颜色是表现的一部分，表现信息包含在 style 属性中，这里的轮廓颜色为黑色，填充颜色为 none 以使猫的脸部透明。...在网页中使用 SVG SVG 是一种图件格式，因此可以使用与其他图像类型相同的方式包含在 HTML 页面中。...在元素内包含 SVG 在元素内包含 SVG 图像非常简单，只需设置 src 指向 SVG 文件位置即可。...如下: 在 CSS 中包含 SVG 可以使用 background-image 属性来显示 SVG，如果没有固有尺寸， SVG 会被缩放为元素高度和宽度的...color 是用来给 HTML 的文本设置颜色的，会被子元素继承，但对 SVG 没有直接效果。

3.3K2 1

使用 SVG 和 Vue.Js 构建动态树图

坐标系和 viewBox 元素的 viewBox 属性非常重要，因为它定义了 SVG 的用户坐标系。简而言之， viewBox 定义了用户空间的位置和维度以便于绘制 SVG。...属性将图像绑定到元素里（已在上述代码中创建）。...计算属性 viewbox 将使用 size 变量。它包含由空格分隔的四个值 —— 它被送入元素的 viewBox 属性。...这些值是从 size 中派生出来的，但在此之后，无论创建多少曲线路径，它们都保持不变。如果你改变 SVG 的大小，这些值会再次被计算出来。考虑到这一点，这里列出了绘制贝塞尔曲线所需的五个值。...在 Vue.js 的帮助下，该图可以通过更多功能进一步扩展，例如，创建一个开关以便于在水平和垂直模式之间切换可以使用 GSAP 为路径设置动画从配置面板控制路径属性（例如颜色和笔触宽度）使用第三方工具库将图表保存并下载为图像

6.5K5 0

Iconfont 还是不能上传，如何维护你的 Icon？

使用 iconfont 有很多优势，比如只需要加载一次，全部图标都可以设置字号大小，颜色、透明度等，可以随意变换字体的形态，并且图标是矢量的，不会随着字体大小的变化失真，得益于 iconfont.cn...n 个字体文件，并且都是包含整个应用的字体，这就失去了使用 iconfont 的优势。...打开 svg 会看到如下代码一个 glyph 元素定义了 SVG 字体中的一个独立的字形，所以我们可以通过一个 node 脚本将这里面的独立字形转变 svg 直接上代码 const cheerio...iconfont 中的字体图标大家都是 1024 所以，设置viewBox="0 0 1024 1024"。看下效果这下，可以不用问离职人员要 iconfont 权限了。...svg 转为 React Component 在 webpack 中我们可以使用一个叫 svgr 的 loader，它可以将 SVG 转换为一个随时可用的 React 组件。

1.4K3 0

Power BI着色地图自适应画布大小

在图表设置区，可以勾选不显示无数据区域，但是青海的地图会非常小，无法自动放大，和画布大小不匹配。本文尝试解决多数据标签和地图自适应画布大小的问题，地理层级切换后续文章会讲到。...记事本打开一份SVG地图，你看到的可能是密密麻麻不知所云的符号：不要被长长的代码吓到，核心元素其实可以简写为如下： <svg xmlns='http://www.w3.org/2000/svg'...除了获取每个地区的path（也就是形状）之外，还需要精确获取每个地区在整个地图的位置以及占用的画布大小，这两个数据可以使用inkscape（免费软件）打开地图，选中每个地区，获得：例如，内蒙古在地图文件的起始位置横向...width=649 height=640看上去和viewbox定义了相同大小的图形。但是本质有所不同。...张鑫旭比如对于内蒙古，它的宽度高度远远小于整个画布大小，把它的宽度高度用viewbox包裹起来，就能起到放大的效果。

1.9K3 0

css实现圆形的四种方法

该border-radius属性还将影响边框，阴影和元素的触摸/单击目标大小。...SVG可以包含一个元素，该元素的样式可以类似于任何其他路径。...它们得到了很好的支持，并且可以进行动画制作，但是与其他技术相比，它们需要更多的标记。为防止视觉上截断形状，请确保圆的半径（加上其笔触宽度的一半，如有）略小于SVG的半径viewBox。... </...任何内容都将位于该形状的顶部，但其布局（包括触摸/点击目标大小）将不受影响。根据浏览器的不同，圆的边缘可能会出现锯齿状或模糊不清。

2.8K2 0

HTML5(七)——SVG基础入门

SVG是W3C标准二、SVG 形状元素 2.1、svg 标签 SVG 的代码都放到 svg 标签呢，SVG 中的标签都是闭合标签，与html中标签用法一致。...viewBox 属性　　使用语法：　　四个参数分别是左上角的横纵坐标、视口的宽高。...表示只看SVG的某一部分，由上述四个参数决定。　　使用 viewBox 之后，相当于svg整体大小不变，只能看到 viewBox 设置部分，视觉上被放大。...2.2、SVG 如何嵌入 HTML SVG 的代码可以直接嵌入到 html 页面中，也可以通过 html 的embed、object、iframe嵌入到html中。.../line.svg" frameborder="0"> src是 SVG 文件路径，width、height、frameborder 设置的大小和边框。

1.8K3 0

HTML5(七)——SVG基础入门

SVG是W3C标准二、SVG 形状元素 2.1、svg 标签 SVG 的代码都放到 svg 标签呢，SVG 中的标签都是闭合标签，与html中标签用法一致。...viewBox 属性　　使用语法：　　四个参数分别是左上角的横纵坐标、视口的宽高。...表示只看SVG的某一部分，由上述四个参数决定。　　使用 viewBox 之后，相当于svg整体大小不变，只能看到 viewBox 设置部分，视觉上被放大。...2.2、SVG 如何嵌入 HTML SVG 的代码可以直接嵌入到 html 页面中，也可以通过 html 的embed、object、iframe嵌入到html中。.../line.svg" frameborder="0"> src是 SVG 文件路径，width、height、frameborder 设置的大小和边框。

2.1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭