html - 如何使路径元素与我的 svg 元素的宽度相同?
问题描述
我的网站上有一个 chevron svg,但定位使页面比我需要的更宽。所以我在查看元素并注意到路径比实际的 svg 元素要窄得多。
我希望整个 svg 元素的宽度仅为雪佛龙尺寸所需的宽度,我可以提供 svg 代码。
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<path style="fill:#FFF;" d="M388.819,239.537L156.092,6.816c-9.087-9.089-23.824-9.089-32.912,0.002
c-9.087,9.089-9.087,23.824,0.002,32.912l216.27,216.266L123.179,472.272c-9.087,9.089-9.087,23.824,0.002,32.912
c4.543,4.544,10.499,6.816,16.455,6.816c5.956,0,11.913-2.271,16.457-6.817L388.819,272.45c4.366-4.364,6.817-10.283,6.817-16.455
C395.636,249.822,393.185,243.902,388.819,239.537z"/>
</svg>
解决方案
您可以通过数据获取BBox
和重新定义viewBox
属性:
const svg = document.querySelector('svg');
const path = svg.querySelector('path');
const box = path.getBBox();
svg.setAttribute('viewBox', `${box.x} ${box.y} ${box.width} ${box.height}`);
<svg viewBox="0 0 512.001 512.001" style="background: gray; width: 100px">
<path style="fill:#FFF;" d="M388.819,239.537L156.092,6.816c-9.087-9.089-23.824-9.089-32.912,0.002
c-9.087,9.089-9.087,23.824,0.002,32.912l216.27,216.266L123.179,472.272c-9.087,9.089-9.087,23.824,0.002,32.912
c4.543,4.544,10.499,6.816,16.455,6.816c5.956,0,11.913-2.271,16.457-6.817L388.819,272.45c4.366-4.364,6.817-10.283,6.817-16.455
C395.636,249.822,393.185,243.902,388.819,239.537z"/>
</svg>
推荐阅读
- python - 合并两个数据框而不创建后缀
- python - 使用 Scrapy 对网站进行分页和获取价格
- php - url中TLD字段的正则表达式
- android - 如何从使用 usb-serial-for-android 连接到 Android 的 CDC 设备读取数据?
- javascript - 如何将 setTimeout 编写为仅运行一次作为 javascript 中的承诺
- java - 连接到 WCF 服务的 Android 应用程序的身份验证(本地环境)
- java - 如何根据其他坐标的高程样本集估计高程
- javascript - 如何将字符串解析为“标题对象”?
- android - 按下主页按钮后,我得到了活动开关 ANDROID
- java - 如何在 java 中获取 timeRangeEndDate 和 timeRangeStartDate?