0

Hello i'm new to using svg while watching a tutorial the autor created an svg file with the following attributes to make it resposive and it works for him, the problem is when i'm trying to do the same the shape gets bigger and it's not resposive at all. please help thank you 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 400 400">

<style type="text/css">
.st0{fill:#231F20;}
.circle{
fill:#27AAE1;

}

</style>
<g id="container" class="colors">
<circle class="st0" cx="200" cy="200" r="197.5"/>
</g>
<g id="dots" class="colors">
<path class="circle" id="c1" d="M146.98,363.54L146.98,363.54L146.98,363.54c-9.2-2.98-14.23-   12.851-11.25-22.05l0,0
    c2.97-9.19,12.84-14.23,22.04-11.25l0,0c9.19,2.979,14.23,12.85,11.25,22.04l0,0c-2.4,7.409-9.26,12.109-16.64,12.109l0,0
    C150.59,364.39,148.77,364.12,146.98,363.54z"/>
 <path class="circle" id="c2" d="M231.13,352.25c-2.99-9.19,2.04-19.061,11.229-22.05l0,0c9.19-2.99,19.07,2.04,22.061,11.229l0,0
    c2.979,9.19-2.04,19.061-11.23,22.05l0,0c-1.8,0.59-3.63,0.86-5.42,0.86l0,0C240.39,364.34,233.53,359.64,231.13,352.25z"/>
<path class="circle" id="c3" d="M61.03,301.16L61.03,301.16L61.03,301.16c-5.69-7.811-3.98-18.761,3.83-24.45l0,0
    c7.81-5.7,18.76-3.98,24.45,3.83l0,0c5.7,7.81,3.98,18.75-3.83,24.45l0,0c-3.11,2.27-6.72,3.359-10.29,3.359l0,0
    C69.79,308.35,64.46,305.85,61.03,301.16z"/>
<path class="circle" id="c4" d="M314.63,304.87c-7.82-5.69-9.55-16.63-3.86-24.45l0,0c5.681-7.82,16.63-9.54,24.45-3.86l0,0
    c7.811,5.69,9.54,16.63,3.85,24.45l0,0l0,0l0,0c-3.42,4.71-8.76,7.21-14.159,7.21l0,0C321.34,308.22,317.729,307.13,314.63,304.87z
    "/>
 <path class="circle" id="c5" d="M28.13,200.18c-0.01-9.66,7.81-17.5,17.48-17.51l0,0c9.66-0.01,17.51,7.81,17.52,17.48l0,0
    c0,9.66-7.82,17.5-17.49,17.52l0,0c0,0-0.01,0-0.02,0l0,0C35.97,217.67,28.13,209.84,28.13,200.18z"/>
 <path class="circle" id="c6" d="M336.88,200c0-0.02,0-0.03,0-0.05l0,0c-0.01-0.08-0.01-0.16-0.01-0.24l0,0c-0.021-9.67,7.8-17.52,17.47-17.54
    l0,0c9.66-0.02,17.51,7.8,17.53,17.46l0,0c0,0.07,0,0.14,0,0.21l0,0c0,0.05,0,0.11,0,0.16l0,0c0,0,0,0,0.01,0l0,0
    c0,9.66-7.84,17.5-17.5,17.5l0,0C344.71,217.5,336.88,209.66,336.88,200z"/>
<path class="circle" id="c7" d="M64.7,123.58c-7.82-5.68-9.56-16.62-3.88-24.44l0,0c5.68-7.83,16.62-9.56,24.44-3.89l0,0
    c7.82,5.68,9.56,16.63,3.88,24.45l0,0c-3.42,4.71-8.76,7.22-14.17,7.22l0,0C71.4,126.92,67.81,125.83,64.7,123.58z"/>
 <path class="circle" id="c8" d="M310.6,119.34L310.6,119.34c-5.7-7.8-4-18.75,3.8-24.45l0,0c7.811-5.7,18.761-4,24.46,3.8l0,0
    c5.7,7.81,4,18.76-3.81,24.46l0,0c-3.11,2.27-6.72,3.37-10.31,3.37l0,0C319.35,126.52,314.03,124.03,310.6,119.34z"/>
 <path class="circle" id="c9" d="M135.43,58.64c-3-9.19,2.02-19.07,11.21-22.07l0,0c9.19-3,19.07,2.02,22.06,11.21l0,0
    c3,9.19-2.01,19.07-11.2,22.07l0,0c-1.8,0.59-3.63,0.87-5.43,0.87l0,0C144.7,70.72,137.84,66.02,135.43,58.64z"/>
<path class="circle" id="c10" d="M242.09,69.71c-9.2-2.97-14.25-12.83-11.28-22.03l0,0c2.971-9.19,12.84-14.24,22.03-11.27l0,0
    c9.2,2.97,14.25,12.83,11.28,22.03l0,0c-2.391,7.41-9.261,12.13-16.65,12.12l0,0C245.689,70.56,243.88,70.29,242.09,69.71z"/>
</g>
</svg>
4

1 回答 1

0

使用 SVG，它变得有点奇怪：

  1. 您应该做的第一件事是将 SVG 标记包装在父 DIV 标记中。

    <div id="parent_element">

    <svg id="your_svg" viewBox="0 0 400 400"></svg>

</div>

  2. 将属性添加preserveAspectRatio="xMinyMin meet"到 SVG

    <div id="parent_element">

    <svg id="your_svg" preserveAspectRatio="xMinyMin meet" viewBox="0 0 400 400"></svg>

</div>

  3. 查看 CSS，您需要将子元素设置为相对于父元素绝对定位：

    /*Parent container*/

div {
    display: inline-block;
    overflow: hidden;
    padding-bottom: 100%;
    position: relative;
    vertical-align: middle;
}


/*SVG child*/

svg {
    display: inline-block;
    left: 0;
    position: absolute;
    top: 0;
}

  4. 根据需要进行调整。注意 padding-bottom hack。它基于 SVG ViewBox 的高度/宽度。有关这方面的更多信息，请查看这篇Codrops 文章，您可以在本文中找到另一个（更短的）教程

于 2014-12-11T03:44:33.580 回答