Html 如何将路径居中放置到svg容器的中心?
我正在尝试将svg路径元素居中放置到svg元素的中心 我试过Html 如何将路径居中放置到svg容器的中心?,html,css,svg,css-transforms,Html,Css,Svg,Css Transforms,我正在尝试将svg路径元素居中放置到svg元素的中心 我试过translate(Xpx,Ypx),但这会破坏不同的屏幕分辨率 这是我的设置 CSS: #sky{ width: 100%; height: 200px; background-color: skyblue; } #container{ display: block; margin: 0 auto; } <svg id="sky"> <g id
translate(Xpx,Ypx)
,但这会破坏不同的屏幕分辨率
这是我的设置
CSS:
#sky{
width: 100%;
height: 200px;
background-color: skyblue;
}
#container{
display: block;
margin: 0 auto;
}
<svg id="sky">
<g id="container">
<path id="cloud" fill="#ffffff" d="M64.407,24.849c-0.013,0-0.026,0.002-0.04,0.002c0.019-0.261,0.04-0.522,0.04-0.788c0-5.944-4.819-10.764-10.763-10.764c-2.383,0-4.577,0.784-6.361,2.094c-2.624-5.62-8.31-9.524-14.922-9.524c-9.1,0-16.477,7.377-16.477,16.477c0,0.896,0.091,1.769,0.229,2.627C10.485,25.758,6.15,30.577,6.15,36.42c0,6.391,5.181,11.572,11.572,11.572h46.685c6.392,0,11.572-5.181,11.572-11.572C75.979,30.029,70.798,24.849,64.407,24.849z"></path>
</g>
</svg>
function centerCloud() {
var cloudCenter = $('#sky').outerWidth()/2 - 35;
$('#cloud').css('transform', 'translate(' + cloudCenter + 'px, 0px)');
}
centerCloud();
$(window).on('resize', function(){
centerCloud();
});
HTML:
#sky{
width: 100%;
height: 200px;
background-color: skyblue;
}
#container{
display: block;
margin: 0 auto;
}
<svg id="sky">
<g id="container">
<path id="cloud" fill="#ffffff" d="M64.407,24.849c-0.013,0-0.026,0.002-0.04,0.002c0.019-0.261,0.04-0.522,0.04-0.788c0-5.944-4.819-10.764-10.763-10.764c-2.383,0-4.577,0.784-6.361,2.094c-2.624-5.62-8.31-9.524-14.922-9.524c-9.1,0-16.477,7.377-16.477,16.477c0,0.896,0.091,1.769,0.229,2.627C10.485,25.758,6.15,30.577,6.15,36.42c0,6.391,5.181,11.572,11.572,11.572h46.685c6.392,0,11.572-5.181,11.572-11.572C75.979,30.029,70.798,24.849,64.407,24.849z"></path>
</g>
</svg>
function centerCloud() {
var cloudCenter = $('#sky').outerWidth()/2 - 35;
$('#cloud').css('transform', 'translate(' + cloudCenter + 'px, 0px)');
}
centerCloud();
$(window).on('resize', function(){
centerCloud();
});
见
我想要一种在不同分辨率下工作的方法,比如%
和div
s
谢谢。所以我通常不会使用jQuery进行样式设置,但我相信这是一个例外,因为我尝试过的任何CSS都不会改变它。下面是我编写的一个小函数,它可以使云居中,即使调整页面大小也是如此 jQuery:
#sky{
width: 100%;
height: 200px;
background-color: skyblue;
}
#container{
display: block;
margin: 0 auto;
}
<svg id="sky">
<g id="container">
<path id="cloud" fill="#ffffff" d="M64.407,24.849c-0.013,0-0.026,0.002-0.04,0.002c0.019-0.261,0.04-0.522,0.04-0.788c0-5.944-4.819-10.764-10.763-10.764c-2.383,0-4.577,0.784-6.361,2.094c-2.624-5.62-8.31-9.524-14.922-9.524c-9.1,0-16.477,7.377-16.477,16.477c0,0.896,0.091,1.769,0.229,2.627C10.485,25.758,6.15,30.577,6.15,36.42c0,6.391,5.181,11.572,11.572,11.572h46.685c6.392,0,11.572-5.181,11.572-11.572C75.979,30.029,70.798,24.849,64.407,24.849z"></path>
</g>
</svg>
function centerCloud() {
var cloudCenter = $('#sky').outerWidth()/2 - 35;
$('#cloud').css('transform', 'translate(' + cloudCenter + 'px, 0px)');
}
centerCloud();
$(window).on('resize', function(){
centerCloud();
});
这是一个。您想垂直/水平居中还是两者都居中?第一个选择是水平居中,如果两者都是,将不胜感激。谢谢