在父div

Question

我已经从插画家导出了一个圆圈作为svg而没有画板。

我现在想要在父div内创建一个动画，这样如果以不同大小查看圆圈，动画/ svg将缩放到正确的大小。

这给我带来了一些麻烦。我尝试了很多我在网上找到的解决方案，但他们似乎都没有因某种原因而工作。这就是我所做的。

＆＃13;

＆＃13;

body{
    width:100%;
    height: 100%;
    margin: 0;
}
.wrapper{
    width:100%;
    height: 100%;
}
.container{
    max-width:825px;
    margin: 0 auto;
     position: relative;
}
@keyframes fadeout {
    0%{
        -webkit-transform: scale(0);
        -webkit-transform-origin: 50% 50%;
        transform: scale(0);
        transform-origin: 50% 50%;	
	stroke: #009AFF;
	stroke-width:3;
	stroke-opacity:0;	
    }
    50%{
	-webkit-transform: scale(1.25, 1.25);
	-webkit-transform-origin: 50% 50%;
    		transform: scale(1.25, 1.25);
			transform-origin: 50% 50%;
	stroke: #009AFF;
	stroke-width:3;
	stroke-opacity:0.5;	
    }
    100%{
	-webkit-transform: scale(1);
	-webkit-transform-origin: 50% 50%;
    		transform: scale(1);
			transform-origin: 50% 50%;
	stroke: #009AFF;
	stroke-opacity:1;
	stroke-width:3;
    }
}    	

.circle{ 
    animation: fadeout 1.5s ease-in-out 1 both; animation-delay: 0s;	
}

＆＃13;

<div class="wrapper">
    <div class="container">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="100%" >
            <title>test</title>
            <circle class="circle" cx="199.925" cy="199.927" r="198.425" fill="none" stroke="#000" stroke-width="3"/>
        </svg>
    </div>	
</div>

＆＃13;

＆＃13;

＆＃13;

你可以看到它创造了一个巨大的圈子。 这是基于我发现的以下链接：
CodePen

Answer 1

您需要为.container提供明确的大小（绝对或相对）。

• 例如。 .container{width: 33%;}

此外，您的viewBox似乎太小而无法包含您的圈子 - 因此请指定更大的viewBox。

• 例如。 viewBox="0 0 600 600"

示例：

body{
    width:100%;
    height: 100%;
    margin: 0;
}
.wrapper{
    width:100%;
    height: 100%;
}
.container{
    width:33%;
    max-width:825px;
    margin: 0 auto;
     position: relative;
}
@keyframes fadeout {
    0%{
        -webkit-transform: scale(0);
        -webkit-transform-origin: 50% 50%;
        transform: scale(0);
        transform-origin: 50% 50%;	
	stroke: #009AFF;
	stroke-width:3;
	stroke-opacity:0;	
    }
    50%{
	-webkit-transform: scale(1.25, 1.25);
	-webkit-transform-origin: 50% 50%;
    		transform: scale(1.25, 1.25);
			transform-origin: 50% 50%;
	stroke: #009AFF;
	stroke-width:3;
	stroke-opacity:0.5;	
    }
    100%{
	-webkit-transform: scale(1);
	-webkit-transform-origin: 50% 50%;
    		transform: scale(1);
			transform-origin: 50% 50%;
	stroke: #009AFF;
	stroke-opacity:1;
	stroke-width:3;
    }
}    	

.circle{ 
    animation: fadeout 1.5s ease-in-out 1 both; animation-delay: 0s;	
}

<div class="wrapper">
    <div class="container">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" width="100%" height="100%" >
            <title>test</title>
            <circle class="circle" cx="199.925" cy="199.927" r="198.425" fill="none" stroke="#000" stroke-width="3"/>
        </svg>
    </div>	
</div>