html - SVG位置在页面重新缩放时移动
问题描述
我目前正在为一个 uni 项目编写一个网站,而不仅仅是使用传统的形状。我想我会尝试使用 SVG 来制作自定义形状,但我目前遇到的唯一问题是我无法在重新缩放页面时修复其中一个 SVG 路径,而另一个是。
我试图通过 px 和百分比来设置 SVG 路径的定位,但这些似乎都不起作用。我也尝试将路径的位置设置为固定。 缩放前的站点 图像 重新缩放的图像
SVG 代码
<div id="midWrapper">
<!--Middle container SVG as it is a custom shape-->
<div id="containerMiddle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 980 590"><title>Custom shaped rectangle with corner missin</title><path d="M766.29,13.57,967.43,214.71A46.32,46.32,0,0,1,981,247.47V544.68A46.32,46.32,0,0,1,934.68,591H46.32A46.32,46.32,0,0,1,0,544.68V46.32A46.32,46.32,0,0,1,46.32,0H733.53A46.32,46.32,0,0,1,766.29,13.57Z" style="fill:#5f1742; pointer-events: none;"/></svg>
</div>
<!--Top right corner of the middle container, used as a link to call pendle burton-->
<div id="contactTriangle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 185.99 185.99"><title>Phone Icon in a Triangle used to call the restaurant</title>
<path d="M186,9.92V176.05a9.92,9.92,0,0,1-16.93,7L2.93,16.93A9.92,9.92,0,0,1,9.94,0H176.07A9.92,9.92,0,0,1,186,9.92Z" style="fill:#fff"/>
<path d="M129.27,80.74a3,3,0,0,1-.14,2.54c-1.36,2.2-3,4.24-4.44,6.36-1.94,2.79-2.38,5.58-.64,8.76,3,5.56,5.82,11.26,8.71,16.9,1.8,3.49,5.12,5.07,8.43,3A132.31,132.31,0,0,0,155.11,108c2.38-1.94,2-5,1.76-7.79-.58-7.44-3.2-14.31-6.75-20.73-10.86-19.59-24.34-37.06-42.84-50.07-4.06-2.86-9.06-4.42-13.71-6.38a7,7,0,0,0-7.32,1.31,124.44,124.44,0,0,0-11,9.71C72,37.36,72.55,41,76.09,44,81,48.05,85.88,52,90.64,56.23a7.06,7.06,0,0,0,7.93,1.31c2.91-1.14,5.77-2.38,9-3.71A141.83,141.83,0,0,1,129.27,80.74Z" style="fill:#5f1742"/>
<path d="M107.56,53.83a141.83,141.83,0,0,1,21.71,26.91,3,3,0,0,1-.14,2.54c-1.36,2.2-3,4.24-4.44,6.36-1.94,2.79-2.38,5.58-.64,8.76,3,5.56,5.82,11.26,8.71,16.9,1.8,3.49,5.12,5.07,8.43,3A132.31,132.31,0,0,0,155.11,108c2.38-1.94,2-5,1.76-7.79-.58-7.44-3.2-14.31-6.75-20.73-10.86-19.59-24.34-37.06-42.84-50.07-4.06-2.86-9.06-4.42-13.71-6.38a7,7,0,0,0-7.32,1.31,124.44,124.44,0,0,0-11,9.71C72,37.36,72.55,41,76.09,44,81,48.05,85.88,52,90.64,56.23a7.06,7.06,0,0,0,7.93,1.31C101.48,56.4,104.34,55.16,107.56,53.83Z" style="fill:#5f1742"/>
</svg>
</div>
</div><!--Closing tag for SVG-->
元素的所有样式
#containerMiddle{
width: 980px;
height: 590px;
margin-top: 60px;
pointer-events: none;
margin-left: auto;
margin-right: auto;
}
#contactTriangle{
width: 185px;
height: 185px;
pointer-events: none;
margin-left: 66%;
margin-top: -31%;
}
任何有关如何改进此站点以使三角形保持原位并提高站点响应能力的建议将不胜感激。
解决方案
我认为您应该避免使用边距定位元素。
您总是希望您的角落 svg 位于容器的右上角,因此请尝试使用position:absolute
,right:calc(50% - 490px)
和top:0
- 只要您的父容器有 ,这将适用于您当前的设置position:relative
。
在这里摆弄:https ://jsfiddle.net/15scjpvd/1/
#midWrapper {
position:relative;
}
#containerMiddle{
width: 980px;
height: 590px;
margin-top: 60px;
pointer-events: none;
margin-left: auto;
margin-right: auto;
}
#contactTriangle{
width: 185px;
height: 185px;
pointer-events: none;
top:0;
right: calc(50% - 490px);
position:absolute;
}
我使用 50% - 490px 的原因是您的容器当前居中对齐 - 它是 50% 代表父容器的中心,而 490px 是其全宽的一半。
如果您希望您的网站更具响应性,而不是使用width
和height
设置像素值,您可以使用百分比。
然后看看这个小提琴:https ://jsfiddle.net/3x6187ov/4/ 然后三角形和矩形的宽度分别是父容器宽度的 100% 和 30%。
#midWrapper {
position:relative;
width:100%;
}
#containerMiddle{
width: 100%;
margin-top: 60px;
pointer-events: none;
margin-left: auto;
margin-right: auto;
}
#contactTriangle{
width: 20%;
pointer-events: none;
top:0;
right:0;
position:absolute;
}
如果你不能让你的容器扩展超过一定的width
,你也可以指定max-width
属性。然后您可以使用以下内容:https ://jsfiddle.net/3fva1cqn/2/
#midWrapper {
position:relative;
width:100%;
max-width:960px;
}
#containerMiddle{
width: 100%;
margin-top: 60px;
pointer-events: none;
margin-left: auto;
margin-right: auto;
}
#contactTriangle{
width: 20%;
pointer-events: none;
top:0;
right:0;
position:absolute;
}
此外,在您当前的场景中,您不必同时指定 svg 的宽度和高度,因为只要您没有专门设置preserveAspectRatio
为无,默认情况下它们将保持使用 viewBox 声明的纵横比。
推荐阅读
- css - 为什么我的自定义 p:selectonemenu 样式不起作用?
- r - 将流程图或图表添加到与 word_document (docx) 结合的 Rmarkdown 文档
- javascript - 如何用函数包装子属性?
- javascript - Webpack 在所有配置完成后或之前执行任务
- javascript - 如何计算两个日期之间的差异和剩余天数的百分比?
- python - 黑屏简单的kivy与colab
- python - 在反向传播中获得 delta 项时的维度错误(神经网络)
- java - 在 Akka Stream 之外访问 statefulMapConcat 的状态
- firebase - Cloud Build:如何按顺序执行两个 CI 作业?
- pipe - 如何在 C++ 中使用 LC0 管道消息