更改圆形 svg 内的描边宽度

2024-03-12

试图改变stroke-width of paths里面一个svg.

两条路径都应该是9代替3 and 5.

结果我的路径变形了(不是圆形)。

请提供任何帮助和简短的解释。

.single{
width:120px;
height:120px;
}
<div class="single">
	<svg viewBox="0 0 100 100" style="display: block; width: 100%;"><path d="M 50,50 m 0,-47.5 a 47.5,47.5 0 1 1 0,95 a 47.5,47.5 0 1 1 0,-95" stroke="#4598C9" stroke-width="3" fill-opacity="0"></path>
  
  <path d="M 50,50 m 0,-47.5 a 47.5,47.5 0 1 1 0,95 a 47.5,47.5 0 1 1 0,-95" stroke="#dd4b39" stroke-width="5" fill-opacity="0" class = "xpath" style="stroke-dasharray: 300, 300; stroke-dashoffset: 255;"></path></svg>
  </div>

如果您将描边宽度设置得更大,您的形状就会比 viewBox 更大。解决此问题的一种方法是更改​​ viewBox 的大小,使形状看起来小一点并适合绘图区域。

.single{
width:120px;
height:120px;
}
<div class="single">
	<svg viewBox="-3 -3 106 106" style="display: block; width: 100%;"><path d="M 50,50 m 0,-47.5 a 47.5,47.5 0 1 1 0,95 a 47.5,47.5 0 1 1 0,-95" stroke="#4598C9" stroke-width="9" fill-opacity="0"></path>
  
  <path d="M 50,50 m 0,-47.5 a 47.5,47.5 0 1 1 0,95 a 47.5,47.5 0 1 1 0,-95" stroke="#dd4b39" stroke-width="9" fill-opacity="0" class = "xpath" style="stroke-dasharray: 300, 300; stroke-dashoffset: 255;"></path></svg>
  </div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

更改圆形 svg 内的描边宽度 的相关文章

  • HTML DOM 宽度 + 可见窗口高度

    如何获取浏览器打开时可用空间的当前高度和宽度 我不需要整个文档的高度 只需要屏幕上可见的高度 你可以看看这个博客文章 http www howtocreate co uk tutorials javascript browserwindow
  • 为什么边框会增加元素的宽度?

    我有一个div如下 其指定宽度为 300px 边框宽度为 2px 为什么2px边框会导致宽度div是304px 如果我希望它有边框但宽度仍为 300 像素怎么办 test width 300px height auto border 2px
  • 文本溢出上的点样式:省略号

    是否可以对点进行样式设置text overflow ellipsis 一个例子是将省略号加粗 如 Lorem Ips 灵感来自这个答案 https stackoverflow com a 21861334 3244925 这是一种设置省略号
  • Bootstrap 居中 div 内的文本左对齐

    我有一段 4 行诗 位于居中的 div 中 因为它是诗歌 所以我需要将 4 行左对齐 但不要对齐到 div 的左侧 这是它的居中方式 Lorem ipsum dolor sit amet onsectetur adipisicin Dolo
  • 如何检索 JQuery 数据表的排序状态

    我对 JQuery Datatables 还很陌生 我正在尝试检索有关数据表的两个信息 当前正在对哪个列索引进行排序 也称为选择 排序顺序 升序或降序 不知道我应该如何解决这个问题 使用 jquery 查找列索引 或者 Datatables
  • 打开我网站上的链接不起作用

    在我的网站上 我有一个我正在尝试获取工作的链接 我有一个遵循正常格式的链接 即 href 以 www youtube com 作为目标链接 并在末尾添加 target blank 当我单击该链接时 托管我的网站的网站会显示一条错误消息 当我
  • 当页面加载图像时,它是只加载一次,还是每次在标记中找到它时加载?

    当页面加载图像时 它是只加载一次 还是每次在标记中找到它时加载 那么 jquery 呢 附加一个 img 会导致它再次重新加载吗 我问这个问题是因为我有高分辨率图像 但需要在标记的许多情况下使用它 img src hello jpg img
  • CSS - 让div继承高度

    我正在尝试制作一个带有圆角的盒子 其中 div 的高度和宽度取决于内容 因此它会自动调整 您可以在此处查看示例 http pastehtml com view 1duizyf html http pastehtml com view 1du
  • 如何使用 Jsoup 解析此 HTML

    我正在尝试提取 了解你的拖拉机 和 壳牌石油公司 1955 请记住 这只是整个代码的一小段 并且有多个 H2 H3 标签 我想获取所有 H2 和 H3 标签的数据 HTML 如下 https i stack imgur com Pif3B
  • 使用 HTML 和 CSS 创建横向和纵向布局

    我有一个要求 我需要编写一个 HTML CSS 它应该显示横向和纵向 具体取决于 iPad 的方向 最初我想使用 HTML 和 CSS 编写这个 然后将其用于 iPad发展 我的问题是实现这一目标的最佳方法是什么 拥有两个不同的 html
  • 如何使用 Angular 创建 n 个可打印页面?

    嗯 我搜索了一下 没有找到类似的东西 我想知道如何使用 Angular 创建可打印内容 跳转到页面末尾并打印更多内容 如何强制内容始终适合特定尺寸 例如 PDF 我需要 Angular 来执行此操作吗 如果不是 HTML 我可以迭代 PDF
  • 无法居中对齐画布

    我一直在谷歌搜索解决方案但无济于事 我只想center align my canvas 我努力了float center text align center margin top 100px但我的舞台没有在浏览器中居中对齐 任何帮助表示赞赏
  • 裁剪响应式全宽图像

    我必须剪辑跨越整个宽度的图像 以下事情对我不起作用 剪辑 这需要绝对位置 因此块元素不会堆叠在下面 背景位置 缩放时无法正确剪辑 放大时剪辑的部分会增加 反之亦然 包装器 包装器高度取决于浏览器宽度 因此其值应该是动态的 我使用了 seti
  • HTML 元素:属性排序

    分析几个页面并注意到不同的方法 写作风格 我想知道 HTML 元素属性的顺序是否有效 浏览器性能 渲染 明显或不明显 客户端 服务器计算资源 任何事物 他们是我应该考虑的订购标准吗 我只能认为它会影响 JQuery 对第 n 个属性的选择
  • 如何使用 file:///F:/foldername 访问 ajax 中的本地文件夹?但它适用于 http://

    在这里 我使用以下代码使用 AJAX jQuery 动态创建文件名列表 window load function var fileExt csv document ready function ajax url file F foldern
  • Rails 上的 SASS 无效 CSS 错误

    我正在尝试使用http startbootstrap com stylish portfolio http startbootstrap com stylish portfolio但是 在我的 Rails 应用程序中 我在 vintage
  • 移动设备上的剩余悬停效果

    我一整天都在努力做这个JSFiddle http jsfiddle net gsamaras q2w4jjyt 4 也适用于手机 但我所有的尝试都没有效果 在桌面上 当用户将鼠标悬停在箭头上时 它会变成红色 在移动设备上 当用户触摸 为了单
  • 使用添加“title”属性换行符 到 JSX 元素

    我知道我可以在 HTML 中添加换行符title属性使用 10 但 React 避免了这一点 例如 这是一个 React 组件 其中包含一个标准的 未由 React 处理的组件title包含换行符的属性 并且可以在浏览器中看到效果 但是如果
  • 单击行内的按钮时防止触发表行 onclick 事件

    我有一个带有 ONCLICK 事件的表行 切换下面的附加数据 在其中一个行单元格内有一个按钮 单击时执行 AJAX 操作 当我单击按钮时 行的 onclick 事件也会触发 并且会发生附加数据在 AJAX 调用完成之前出现 这对我来说是一个
  • 如何使弹出窗口溢出:在溢出内可见:自动上下文

    我有一个 div 列表 如果超过父框 overflow x 应该滚动 并且在悬停时 我想看到一个弹出窗口 我的问题是 如果我将鼠标悬停在任何子 div 上 弹出窗口将被考虑用于溢出计算 但我只想让它在所有内容之上可见 而不是使其扩展滚动区域

随机推荐