html - 如何调整 SVG 的位置?
问题描述
我想正确设置SVG,但我没有成功使用right: 0;
Transform,在这种情况下定位通常非常困难,我不知道该选择哪一个。
SVG 使用了哪些定位设置?如果您推荐有用的 SVG 网站,我将不胜感激。
*,
*::before,
*::after {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body {
font-family: sans-serif;
overflow-x: hidden;
text-align: center;
width: 100vw;
height: 100vh;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.page-1 {
position: relative;
background-color: black;
height: 80vh;
}
.custom-shape {
position: absolute;
width: 100%;
}
.custom-shape svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 121px;
}
.custom-shape .shape-fill {
fill: #EC2424;
}
<div class="page-1">
<div class="custom-shape">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" class="shape-fill"></path>
<path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" class="shape-fill"></path>
<path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" class="shape-fill"></path>
</svg>
</div>
</div>
解决方案
我不确定您的代码示例究竟需要什么结果,但有些事情需要考虑......
SVG 样式
- 默认 SVG 显示 CSS 是
inline
,但您已经将block
其更改为完美的,因此它现在的行为类似于 DIV。 - 默认 SVG 比率遵循
viewBox
属性设置,因此无论您在 SVG elem 上设置什么width
或height
CSS,SVG 纵横比都将根据该viewBox
值固定。 - 可能(无法确定)如果您同时设置
width
和height
CSS,这可能会覆盖viewBox
比率设置并强制 SVG 为您定义的任何内容。 - 显然,任何内联 CSS 属性都喜欢
width
或height
可能覆盖您设置的任何样式表 CSS。 - 您已设置属性
preserveAspectRatio="none"
,因此viewBox
设置将被忽略。
SVG定位
- SVG 元素
<svg>
定位行为非常类似于根据您定义的 CSSdisplay
模式定位任何其他元素 html。position
- SVG 内部子元素(
path
,rect
,circle
等)是绝对定位的(相对于 SVG 元素),使用像/d
前缀的内联属性。x
y
- 理想情况下,除非您真正了解它们的位置行为,否则永远不要尝试使用 CSS 覆盖子 SVG 元素的定位。
- 当您直接定位 SVG 元素时,该比率将保持与
viewBox
设置一致,除非您强制执行其他操作。
一些 SVG 浏览器 CSS 怪癖
- 在 CSS 中定位 SVG 元素和子元素时,完全可以通过
class
,id
或data
属性来定位它们。 - 主要是 iOS safari 无法通过元素名称识别定位子 SVG 元素,例如
SVG PATH { fill: blue; }
在 safari/mobile 和其他浏览器中存在一些问题。你用class="shape-fill"
在你身上的方式<path>
是完美的。 - 可能值得通过使用or选择器
.custom-shape svg
直接定位 SVG来切换您的目标方式,只是为了确定。id
class
- 我认为以您在示例中的方式定位实际的 SVG 父元素可能在 iOS 上表现良好,但值得在所有桌面和移动浏览器上进行测试以确保.. 特别是 Edge 之前的旧 IE,如果您需要它们。
对于 SVG 参考,SVG 的圣经在这里https://developer.mozilla.org/en-US/docs/Web/SVG
如果您在问题中需要有关示例代码的进一步帮助,请在问题中详细说明以解决您的问题。
另外,为什么要添加
1.3px
到 SVG100%
宽度?
推荐阅读
- sql - PLSQL 提取单打值
- php - 为什么 PHP 脚本中没有执行 curl 代码?(WAMP 服务器)
- bootstrap-4 - 如何使数据实时搜索样式适用于我的选择
- visual-studio - 带有 Sitecore 弹出窗口的 TDS Hedgehog 同步项目仅显示一个空框架
- java - 在 JavaFX 中绘制 2 条平行线
- windows - 为什么Chrome安装不能触发Windows Defender等
- php - 查询 MySQL 和 FROM_UNIXTIME Epoch
- javascript - 使用闭包返回函数作为参数
- angular - 如何从角度向 Google Analytics 报告当前标题?
- hyperledger-fabric - MSP 错误:提供的身份无效:x509:证书由未知权威 Hyperledger Fabric 签名