如何使SVG模式无响应？

Question

我有以下SVG。大小取决于它显示的位置。

我希望图案保持定义的大小，无论圆圈有多大/小。

这可能吗？

谢谢：）

<svg id="bg-circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" style="top: -219px; left: 0px; width: 3805px;">
        <defs>
            <pattern id="a" x="0.5" y="0.5" width="1" height="1" patternUnits="userSpaceOnUse" viewBox="0 0 28 28">
                <rect width="28" height="28" style="fill:#002a3a"></rect>
                <circle cx="21" cy="28" r="4" style="fill:#f7f7f6;opacity:0.03"></circle>
                <circle cx="7" cy="28" r="4" style="fill:#f7f7f6;opacity:0.03"></circle>
                <circle cx="28" cy="14" r="4" style="fill:#f7f7f6;opacity:0.03"></circle>
                <circle cx="14" cy="14" r="4" style="fill:#f7f7f6;opacity:0.03"></circle>
                <circle cy="14" r="4" style="fill:#f7f7f6;opacity:0.03"></circle>
                <circle cx="21" r="4" style="fill:#f7f7f6;opacity:0.03"></circle>
                <circle cx="7" r="4" style="fill:#f7f7f6;opacity:0.03"></circle>
            </pattern>
        </defs>
		<circle cx="50" cy="50" r="50" style="fill:url(#a);"></circle>
    </svg>

Answer 1

您的SVG有一个viewBox，因此SVG将扩展到其父容器的大小。没有办法让SVG的一部分不能扩展。

如果要在保持图案大小相同的情况下更改圆的大小，请更改圆的大小，而不是整个SVG。

＆＃13;

＆＃13;

svg {
  width: 40%;
}

＆＃13;

<svg id="bg-circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
        <defs>
            <pattern id="a" x="0.5" y="0.5" width="1" height="1" patternUnits="userSpaceOnUse" viewBox="0 0 28 28">
                <rect width="28" height="28" style="fill:#002a3a"></rect>
                <circle cx="21" cy="28" r="4" style="fill:#f7f7f6;opacity:0.3"></circle>
                <circle cx="7" cy="28" r="4" style="fill:#f7f7f6;opacity:0.3"></circle>
                <circle cx="28" cy="14" r="4" style="fill:#f7f7f6;opacity:0.3"></circle>
                <circle cx="14" cy="14" r="4" style="fill:#f7f7f6;opacity:0.3"></circle>
                <circle cy="14" r="4" style="fill:#f7f7f6;opacity:0.3"></circle>
                <circle cx="21" r="4" style="fill:#f7f7f6;opacity:0.3"></circle>
                <circle cx="7" r="4" style="fill:#f7f7f6;opacity:0.3"></circle>
            </pattern>
        </defs>
		<circle cx="50" cy="50" r="50" style="fill:url(#a);"></circle>
</svg>


<svg id="bg-circle2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
        <defs>
            <pattern id="a" x="0.5" y="0.5" width="1" height="1" patternUnits="userSpaceOnUse" viewBox="0 0 28 28">
                <rect width="28" height="28" style="fill:#002a3a"></rect>
                <circle cx="21" cy="28" r="4" style="fill:#f7f7f6;opacity:0.3"></circle>
                <circle cx="7" cy="28" r="4" style="fill:#f7f7f6;opacity:0.3"></circle>
                <circle cx="28" cy="14" r="4" style="fill:#f7f7f6;opacity:0.3"></circle>
                <circle cx="14" cy="14" r="4" style="fill:#f7f7f6;opacity:0.3"></circle>
                <circle cy="14" r="4" style="fill:#f7f7f6;opacity:0.3"></circle>
                <circle cx="21" r="4" style="fill:#f7f7f6;opacity:0.3"></circle>
                <circle cx="7" r="4" style="fill:#f7f7f6;opacity:0.3"></circle>
            </pattern>
        </defs>
		<circle cx="50" cy="50" r="25" style="fill:url(#a);"></circle>
</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个。它是100％响应。希望你能找到你的解决方案。

.svg-container { 
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%; 
	vertical-align: middle; 
	overflow: hidden; 
}
.svg-content { 
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}

 <div class="svg-container" id="bg-circle">
  <svg version="1.1" viewBox="0 0 500 500" 
preserveAspectRatio="xMinYMin meet" class="svg-content">
  <defs>
        <pattern id="a" x="0.5" y="0.5" width="1" height="1" patternUnits="userSpaceOnUse" viewBox="0 0 28 28">
            <rect width="28" height="28" style="fill:#002a3a"></rect>
            <circle cx="21" cy="28" r="4" style="fill:#f7f7f6;opacity:0.03"></circle>
            <circle cx="7" cy="28" r="4" style="fill:#f7f7f6;opacity:0.03"></circle>
            <circle cx="28" cy="14" r="4" style="fill:#f7f7f6;opacity:0.03"></circle>
            <circle cx="14" cy="14" r="4" style="fill:#f7f7f6;opacity:0.03"></circle>
            <circle cy="14" r="4" style="fill:#f7f7f6;opacity:0.03"></circle>
            <circle cx="21" r="4" style="fill:#f7f7f6;opacity:0.03"></circle>
            <circle cx="7" r="4" style="fill:#f7f7f6;opacity:0.03"></circle>
        </pattern>
    </defs>
    <circle cx="100" cy="100" r="100" style="fill:url(#a);"></circle>
  </svg>
</div>