在父div内缩放svg

我已经从illustrator中导出了一个圆形作为svg而没有画板。在父div内缩放svg

我现在想在父div中创建一个动画，以便如果在不同大小上查看该圆形，动画/ svg将缩放到正确的大小。

这给了我一些头痛的问题。我尝试了许多我在网上找到的解决方案，但都因为某种原因似乎不起作用。这是我做的。

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%; \t 
 
\t stroke: #009AFF; 
 
\t stroke-width:3; 
 
\t stroke-opacity:0; \t 
 
    } 
 
    50%{ 
 
\t -webkit-transform: scale(1.25, 1.25); 
 
\t -webkit-transform-origin: 50% 50%; 
 
    \t \t transform: scale(1.25, 1.25); 
 
\t \t \t transform-origin: 50% 50%; 
 
\t stroke: #009AFF; 
 
\t stroke-width:3; 
 
\t stroke-opacity:0.5; \t 
 
    } 
 
    100%{ 
 
\t -webkit-transform: scale(1); 
 
\t -webkit-transform-origin: 50% 50%; 
 
    \t \t transform: scale(1); 
 
\t \t \t transform-origin: 50% 50%; 
 
\t stroke: #009AFF; 
 
\t stroke-opacity:1; 
 
\t stroke-width:3; 
 
    } 
 
}  \t 
 

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

<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> \t 
 
</div>

正如你可以看到它创建了一个巨大的圆。这是基于以下的链接，我发现：
CodePen

来源

2017-02-20 Interactive

你需要给你的.container一个明确的尺寸（绝对或相对）。

例如， .container{width: 33%;}

此外，它看起来像你的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%; \t 
 
\t stroke: #009AFF; 
 
\t stroke-width:3; 
 
\t stroke-opacity:0; \t 
 
    } 
 
    50%{ 
 
\t -webkit-transform: scale(1.25, 1.25); 
 
\t -webkit-transform-origin: 50% 50%; 
 
    \t \t transform: scale(1.25, 1.25); 
 
\t \t \t transform-origin: 50% 50%; 
 
\t stroke: #009AFF; 
 
\t stroke-width:3; 
 
\t stroke-opacity:0.5; \t 
 
    } 
 
    100%{ 
 
\t -webkit-transform: scale(1); 
 
\t -webkit-transform-origin: 50% 50%; 
 
    \t \t transform: scale(1); 
 
\t \t \t transform-origin: 50% 50%; 
 
\t stroke: #009AFF; 
 
\t stroke-opacity:1; 
 
\t stroke-width:3; 
 
    } 
 
}  \t 
 

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

<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> \t 
 
</div>

来源

2017-02-20 09:29:20 Rounin

尼斯这几乎是我想要做什么就做。问题是我仍然有一个很大的viewbox。因此，如果svg在get中使用的页面越小，那么viewbox也会为此做圆圈。如果我可以缩放视图框会很好。 Thnx tho！ – Interactive

真正的viewbox不是_any_大小 - 它只是一个SVG绘制在其中的相对笔。在这种情况下，您可以通过修改'.container'的大小来控制页面上视框的大小。 – Rounin

我正在阅读：https://sarasoueidan.com/blog/svg-coordinate-systems/这是非常有用的，所以我将尝试理解这一点，然后再次检查它。 Thnx到目前为止！ – Interactive

在父div内缩放svg

回答

相关问题