如何按百分比设置 svg 宽度和 svg 高度?

2024-02-05

我用 svg 创建了一条线。但是当我调整浏览器大小时,用 svg 创建的线没有调整大小。

我尝试以百分比设置 svg 的宽度,但这样做后该线不会出现。如何按百分比设置 svg 的宽度?

<svg height="210" width="500">
  <line x1="380" y1="20" x2="230" y2="200" style="stroke: rgb(234, 243, 234); stroke-width: 5"></line>
</svg>

我解决了我的问题。 我将我的代码更改为这个并且它有效:

<svg style="width:100%;height:100%;">
  <line x1="100%" y1="0%" x2="0%" y2="100%" style="stroke: rgb(234, 243, 234);stroke-width: 5;"></line>
</svg>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何按百分比设置 svg 宽度和 svg 高度? 的相关文章

  • jQuery / Javascript - 检测 WooCommerce 商店通知 html 是否可见

    我正在寻找一种方法来确定使用 JavaScript jQuery 是否显示 WooCommerce 商店通知 商店通知的 HTML 看起来像这样 p class woocommerce store notice demo store sty
  • Google 字体衬里数字

    我正在使用Raleway http www google com fonts specimen Raleway字体和谷歌字体的描述说 下载的内容既有旧风格 也有衬里数字 我找不到任何说明文件how到行数字 有谁知道我该怎么做 回答我自己的问
  • 使用列数,如果分辨率较小,是否可以动态地从 3 列更改为 2 列?

    我正在使用column count属性来设置一个页面 在三列中包含多个 div 这在较大的屏幕上看起来很棒 每个 div 都有固定宽度 例如 500px 包含图像 然而 当在较小的屏幕上工作时 浏览器会尝试强制内容在原始的三列中 而实际上它
  • 严格的 DocType 在 FF/Chrome 中强制规定最小表格行高

    我以前从未注意到的事情 但似乎在 Chrome Firefox 可能还有 Opera Safari 我没有专门检查这些 中 使用严格的文档类型可以防止表行显示小于我无法显示的值来确定计算 以下文档在 IE7 中的显示方式与人们想象的一样 所
  • 第二个子div高度填充父级高度

    我有一个 div 文章 它有两个子项 标题和 content outer 标题有一个正确的高度 我希望 content outer 有一个高度 没有给出具体数字 例如 200px 以便标题高度 content outer 高度 文章高度 这
  • 在 SVG 路径中动态创建渐变层

    我正在使用 SVG 创建动态路径 我现在希望在我的路径中添加渐变 但我被困住了 按照我尝试的方式 我的渐变沿着图 2 所示的路径进行 而我要求它是图 1 中的那种 Current 我的渐变和描边定义如下
  • 文本输入框作为 SVG 中的“foreignObject” - 文本溢出问题

    我使用 foreignObject 标签在 svg 中有一个文本输入框 这很有效 但是如果您在输入框中输入的内容比其宽度长 从而导致其溢出 那么文本实际上会出现在页面上的其他位置 可能是没有外来对象标记的默认位置 这是一些屏幕截图来解释正在
  • 如何修改primeng p日历样式?

    我正在尝试修改 primeng p calendar 但它无法正常工作 例如 我希望它是这样的 需要的改变 https i stack imgur com QBXoh png 但原来它看起来像这样 原始图像 https i stack im
  • font-family 未应用于移动设备

    我的 font family 属性有问题css 我有一个标题 我想使用特定字体设置样式 我在用 fontface 在我的桌面上它工作正常 但在iPhone and iPad我得到了一些标准字体 我认为可能是次 但我不确定 我做了一些研究并尝
  • 如何更改 Material UI 版本 5 自动完成中的选项字体大小?

    我想更改下拉项目的字体大小 我尝试了不同的方法来改变字体大小 如下所示 如何更改 Material UI 自动完成字体大小 https stackoverflow com questions 62492939 how do i change
  • 为什么inline-block元素出现在inline元素的下方?如何让它们出现在同一行?

    我目前正在尝试理解基本的 HTML 和 CSS 概念 并遇到了一个非常奇怪的问题 我有两个元素 一个具有 display inline 另一个具有 display inline block 我正在尝试创建一个列表 类似的东西1 SOME C
  • 如何在不同页面上使用不同类型的导航栏组件

    我为我们项目的两个不同子系统创建了两个不同的导航栏组件 App js function App return lt gt
  • For 循环不适用于 JavaScript 动画

    我正在尝试编写一个 for 循环 以在单击形状按钮时重复 爆炸 路径的动画 但 for 循环无法工作 执行 而且我看不出哪里出了问题 for循环的目的 循环动画路径的过程 然后将动画反转回其原始路径 我知道问题出在 for 循环中的某个地方
  • 多列定义列表[重复]

    这个问题在这里已经有答案了 我有一个 dl 像这样 dl dt Quantity dd dt Size dd dt Rise dd dt Color dd dd dt dd dt dd dt dd dt dl 该列表是通过 php 动态生成
  • 为什么 Flexbox 会拉伸我的图像而不是保留纵横比?

    Flexbox 具有这种行为 它将图像拉伸到其自然高度 换句话说 如果我有一个带有子图像的 Flexbox 容器 并且我调整了该图像的宽度 则高度根本不会调整大小 并且图像会被拉伸 div display flex flex wrap wr
  • 边界半径圆

    我有这个代码 span p margin 0 span background color red display inline block border radius 50 span p 25 p p 08 p span 我想在我的跨度上画
  • 如何观察包含许多 sass 文件的整个目录/文件夹的变化

    我如何跟踪包含许多 sass 文件的整个目录的更改 我正在使用以下命令来观察 sass 的变化 file sass watch style scss style css 但是如何观察包含许多 sass 文件的整个目录 文件夹的变化 只需使用
  • 有 CSS 父选择器吗?

    我该如何选择 li 元素是锚元素的直接父元素 举个例子 我的 CSS 应该是这样的 li lt a active property value 显然 有多种方法可以使用 JavaScript 实现此目的 但我希望 CSS Level 2 本
  • 自 JRE 1.7.0_25 起,Batik 无法进行转换

    自从我更新到 JAVA 1 7 0 25 以来 蜡染在应用转换时会抛出异常 堆栈跟踪是 java awt image ImagingOpException Unable to transform src image at java awt
  • 将 Div 放置在另一个 DIV 下方

    我有两个 DIV 元素 其中之一具有绝对位置 主 DIV 的左下角 第二个 DIV 是隐藏的 只有单击链接才能显示 我需要第二个出现在第一个下方 但由于第一个 div 的位置是绝对的 第二个 div 出现在第一个 div 之上 HTML 代

随机推荐

  • 在使用 flutter_bloc 库调度事件之前等待一些结果

    我正在尝试创建一个 BLOC 它依赖于另外两个基于时间的块和一个非基于时间的块 我的意思是基于时间 例如他们正在连接远程服务器 因此需要时间 它的工作原理如下 登录 当然需要一些时间 如果登录成功 做另一个过程 这也需要时间 它返回一个未来
  • Elisp:如何将数据保存在文件中?

    我想将数据保存到我的 elisp 程序中的文件中 我有一个多维列表 我想将其保存到文件中 以便下次程序运行时可以恢复它 最简单 最好的方法是什么 当然 我意识到我可以简单地将数据以自定义格式写入缓冲区 然后保存缓冲区 但是当我想要恢复数据格
  • i 标签的 Alt 或 title 属性

    I use 字体真棒 http fortawesome github com Font Awesome 并像这样显示他们的字体 i class icon lock i 这将显示一个漂亮的小锁符号 为了让用户知道这到底意味着什么 我尝试添加标
  • 如何在 AdonisJS 上验证多部分文件?

    我在用Adonis js在最新版本但无法验证 已经尝试过了 request multipart file avatar types jpeg jpg png I already tried gt type image types image
  • 在 Angular 中什么时候应该使用 href 代替 routerLink?

    当我在 Angular 中开发并创建视图时 我总是使用 routerLink 从一个视图导航到另一个视图 最近我看到用 Angular 制作的重要页面使用 href 而不是 routerLink 来路由网站上的视图 我的问题是 什么时候在
  • 使用 shell 脚本在 XML 中搜索字符串或数字时获取父标记

    我有一个结构与此类似的文件
  • scikit-learn 的 TfidfVectorizer 在线版本

    我正在寻找使用 scikit learn 的HashingVectorizer因为它非常适合在线学习问题 文本中的新标记保证映射到 桶 不幸的是 scikit learn 中包含的实现似乎不包括对 tf idf 功能的支持 将矢量化器输出传
  • primefaces keyup 或其他 ajax 事件延迟

    我有类似的东西
  • 在需要/加载软件包后,是否可以覆盖对软件包(重新)安装的阻止?

    实际问题 是否可以在需要 加载包后覆盖对包 重新 安装的阻止 我明白阻止 真实 重新安装 to the same一旦使用了包 从中加载包的库就非常有意义 但我的用例有点不同 背景 我喜欢用 沙箱库 来测试自己的包的想法 除了要测试的包之外
  • 将 graphql 变量传递给 Material UI 组件

    我正在使用 React Typescript 并有一个自动完成材质 UI 组件 我正在尝试将查询建议添加到自动完成组件中 我的 graphql 查询如下所示 查询定义 import gql from graphql tag import u
  • 在java中打印unicode字符

    显示中unicodejava中的字符显示 符号 例如 我尝试打印 它是unicode编号为 U 0905 html 表示为 下面的代码打印 代替unicode特点 char aa u0905 String myString aa resul
  • var 和变量的范围

    如果我有一个像这样的函数
  • 如何为除某些列之外的列名添加前缀?

    这是 ScalaBoy 提出的问题的改编here https stackoverflow com questions 53380310 how to add suffix to column names except some column
  • 如何在 Android 应用程序中使用 facebook 登录?

    如何授权facebook sdk 我在授权后如何获取用户详细信息 如姓名 性别 出生日期 年龄 你必须看看https developers facebook com docs reference api https developers f
  • System.nanoTime() 的精度与准确度

    的文档System nanoTime http docs oracle com javase 6 docs api java lang System html nanoTime 说以下 强调我的 此方法只能用于测量经过的时间 与系统或挂钟时
  • 当第二个键已按下时如何检测按键按下/按下

    在我的应用程序中 我允许用户通过按住右箭头键通过使用ProcessCmdKey 现在我想让用户能够在需要时提高滚动速度 理想情况下 用户应该能够按住右箭头键 那么当他决定提高速度时 他应该在不释放右箭头键 同时按住换档键当他决定恢复正常速度
  • 检查两个字符串是否包含相同的字符,不考虑它们的频率

    我有两个字典对应于两个不同字符串的字符数 我想检查它们是否由相同的字符组成 与字符出现的频率无关 说 我有两个字符串caars and racs它们是由相同的角色组成的a c r s 我知道cmp比较两个字典的方法 它还比较两个键值对 但我
  • InputStreamReader缓冲问题

    不幸的是 我正在从一个具有两种字符编码类型的文件中读取数据 有一个标题和一个正文 标头始终采用 ASCII 格式 并定义正文编码所用的字符集 标头不是固定长度 必须通过解析器运行以确定其内容 长度 该文件也可能非常大 因此我需要避免将整个内
  • Ubuntu 11.10 上的 OpenCV

    我刚刚将系统从 ubuntu 11 04 更新到 11 10 现在我无法再编译任何包含 OpenCV 库引用的 C 程序 我已经尝试重新安装 OpenCV 我使用2 1版本 但我遇到了这个错误 tmp ccArHTZL o In funct
  • 如何按百分比设置 svg 宽度和 svg 高度?

    我用 svg 创建了一条线 但是当我调整浏览器大小时 用 svg 创建的线没有调整大小 我尝试以百分比设置 svg 的宽度 但这样做后该线不会出现 如何按百分比设置 svg 的宽度