如何使用CSS调整SVG路径上SVG之间的空间？
如何使用CSS调整SVG路径上SVG之间的空间？
提问于 2022-02-10 18:57:02
我为一棵树做了一个菜鸟DIY设计。我用SVG把它放在另一个SVG上。它工作得很好，但需要能够调整复制的SVG之间的距离(包括垂直的和水平的)。
现在的情况如下：
在上面的图片中，我能够在另一个普通的SVG(saree)和副本上添加一个SVG(设计)。但是我如何使用CSS来处理它们之间的距离。
<style>
.blowse-top-detailed {
width: 500px;
height: 300px;
left: 40%;
top: 5%;
position: absolute;
}
</style>
<svg class="saree-top saree" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 243.000000 439.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,439.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<pattern id="saree_pattern_img" patternUnits="userSpaceOnUse" width="100%" height="100%">
<svg id="saree_img" xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 401.000000 254.000000" style="width: 30px;height: 30px;">
<g xmlns="http://www.w3.org/2000/svg" transform="translate(0.000000,254.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M2865 2381 c-44 -10 -90 -23 -102 -29 -49 -27 -55 -80 -18 -160 37 -80 34 -113 -17 -166 -30 -30 -62 -50 -106 -66 -54 -20 -61 -25 -45 -34 26 -15 132 -10 176 8 20 9 62 39 92 66 40 36 69 53 112 65 90 25 121 42 139 76 20 40 16 62 -35 172 l-41 87 -37 -1 c-21 -1 -74 -9 -118 -18z" style="fill: rgb(255, 255, 255);"></path>
<path d="M992 2351 c-18 -11 -52 -133 -52 -183 0 -49 44 -100 102 -117 24 -8 57 -18 75 -23 18 -5 66 -36 107 -69 83 -66 118 -81 156 -67 l25 10 -25 10 c-93 37 -117 59 -127 121 -4 27 2 51 27 101 l32 66 -25 54 c-31 67 -56 81 -162 89 -44 3 -89 9 -100 12 -11 3 -26 1 -33 -4z" style="fill: rgb(255, 255, 255);"></path>
<path d="M3175 2136 c-35 -15 -90 -74 -112 -121 -15 -30 -14 -37 1 -75 l16 -42 -28 -26 c-49 -46 -135 -82 -246 -104 -58 -12 -106 -25 -106 -29 0 -15 150 -10 220 6 36 9 106 32 155 53 85 35 96 37 207 38 110 1 120 3 158 28 53 35 67 64 52 113 -6 21 -14 64 -18 96 -4 32 -10 60 -14 62 -5 3 -64 7 -132 10 -88 3 -132 0 -153 -9z" style="fill: rgb(255, 255, 255);"></path>
<path d="M557 2123 c-4 -3 -7 -14 -7 -23 0 -9 -11 -38 -25 -64 -14 -26 -25 -58 -25 -71 0 -31 43 -81 93 -107 36 -18 51 -19 141 -13 90 6 106 4 151 -15 28 -12 91 -33 140 -46 155 -43 432 -42 438 1 1 6 -52 12 -133 16 -142 6 -206 22 -314 76 -80 40 -88 50 -80 101 6 41 4 46 -32 84 -57 59 -85 68 -222 68 -65 0 -122 -3 -125 -7z" style="fill: rgb(255, 255, 255);"></path>
<path d="M1933 2102 c-56 -31 -78 -69 -78 -139 0 -72 19 -105 81 -140 72 -42 153 -22 205 50 54 74 33 180 -43 227 -41 25 -121 26 -165 2z" style="fill: rgb(255, 255, 255);"></path>
<path d="M1017 1974 c-8 -8 2 -35 22 -58 31 -36 205 -96 242 -84 13 4 -114 105 -169 134 -27 14 -84 19 -95 8z" style="fill: rgb(255, 255, 255);"></path>
<path d="M2930 1949 c-14 -6 -41 -25 -60 -44 -20 -19 -65 -46 -100 -61 -84 -34 -94 -44 -43 -44 47 0 220 54 246 77 10 9 17 30 17 50 0 36 -13 41 -60 22z" style="fill: rgb(255, 255, 255);"></path>
<path d="M1734 1876 l-39 -33 20 -38 c28 -52 90 -112 150 -143 44 -24 61 -27 150 -27 89 0 105 3 151 27 51 27 127 102 147 146 9 20 5 28 -28 62 -22 22 -46 40 -55 40 -8 0 -26 -20 -39 -44 -13 -25 -40 -57 -61 -71 -102 -71 -216 -46 -296 65 -20 27 -41 50 -48 50 -7 0 -30 -15 -52 -34z" style="fill: rgb(255, 255, 255);"></path>
<path d="M3524 1811 c-26 -12 -57 -40 -85 -77 -25 -33 -64 -69 -86 -82 -121 -67 -410 -70 -627 -6 -105 30 -50 -12 65 -50 85 -29 186 -41 404 -52 l149 -7 46 -47 c39 -40 55 -50 104 -60 32 -7 96 -10 141 -8 77 3 86 5 122 36 21 18 66 54 100 80 40 30 62 54 63 68 0 32 -175 199 -225 213 -59 16 -124 13 -171 -8z" style="fill: rgb(255, 255, 255);"></path>
<path d="M1611 1784 c-27 -34 -27 -41 7 -95 54 -83 156 -160 255 -191 104 -32 246 -19 355 34 90 43 221 192 206 233 -4 8 -15 20 -25 25 -37 20 -58 11 -99 -45 -48 -65 -113 -115 -182 -140 -73 -26 -195 -18 -268 19 -59 29 -138 101 -171 154 -25 39 -51 41 -78 6z" style="fill: rgb(255, 255, 255);"></path>
<path d="M365 1768 c-11 -7 -64 -45 -117 -85 -119 -90 -123 -103 -47 -163 29 -22 64 -58 80 -79 34 -47 96 -71 186 -71 97 0 152 28 198 101 l23 36 134 7 c206 11 392 46 516 97 84 35 59 55 -29 23 -256 -90 -590 -60 -656 61 -33 61 -87 85 -187 85 -45 0 -90 -6 -101 -12z" style="fill: rgb(255, 255, 255);"></path>
<path d="M782 1768 c-19 -19 -15 -32 23 -71 32 -33 40 -36 93 -36 31 0 118 -3 192 -6 112 -5 147 -3 204 12 87 23 104 48 24 36 -83 -12 -258 -9 -315 5 -33 9 -60 24 -77 43 -23 25 -33 29 -79 29 -29 0 -58 -5 -65 -12z" style="fill: rgb(255, 255, 255);"></path>
<path d="M3150 1736 c-41 -22 -62 -24 -239 -29 -106 -3 -195 -8 -198 -11 -6 -6 1 -9 62 -26 47 -13 396 -26 447 -16 35 6 88 46 88 65 0 9 -83 41 -104 41 -6 -1 -31 -11 -56 -24z" style="fill: rgb(255, 255, 255);"></path>
<path d="M1470 1730 c-24 -24 -24 -29 -4 -58 22 -31 69 -30 90 3 15 23 15 27 0 50 -20 31 -58 33 -86 5z" style="fill: rgb(255, 255, 255);"></path>
<path d="M2482 1729 c-30 -11 -39 -54 -17 -79 25 -28 61 -25 81 5 30 47 -10 94 -64 74z" style="fill: rgb(255, 255, 255);"></path>
<path d="M1532 1610 c-16 -27 -15 -41 7 -67 24 -29 42 -29 69 0 28 29 28 41 0 67 -28 25 -60 26 -76 0z" style="fill: rgb(255, 255, 255);"></path>
<path d="M2400 1591 c-16 -31 -12 -49 15 -67 21 -14 31 -15 50 -6 24 11 30 27 25 62 -5 34 -73 42 -90 11z" style="fill: rgb(255, 255, 255);"></path>
<path d="M2647 1581 c35 -29 166 -80 270 -106 51 -13 113 -31 137 -40 49 -19 99 -15 132 10 19 15 19 15 0 30 -20 15 -53 22 -257 54 -75 12 -169 32 -209 46 -87 30 -103 31 -73 6z" style="fill: rgb(255, 255, 255);"></path>
<path d="M1325 1535 c-149 -55 -227 -71 -276 -56 -38 11 -45 10 -96 -15 -47 -23 -53 -28 -41 -41 35 -34 82 -28 277 36 103 35 206 73 227 86 55 34 20 30 -91 -10z" style="fill: rgb(255, 255, 255);"></path>
<path d="M1639 1521 c-20 -16 -22 -23 -14 -47 6 -18 21 -33 39 -39 24 -8 31 -6 47 14 22 27 24 41 7 63 -21 27 -53 30 -79 9z" style="fill: rgb(255, 255, 255);"></path>
<path d="M2580 1525 c26 -31 190 -131 307 -187 68 -32 127 -67 133 -78 5 -10 10 -34 10 -53 0 -42 41 -87 115 -124 l49 -26 121 18 c66 10 127 21 135 26 9 4 20 36 28 76 7 37 15 80 19 95 11 56 -3 78 -75 111 -86 39 -154 42 -232 8 -44 -19 -65 -22 -110 -18 -87 10 -293 73 -396 122 -99 48 -125 55 -104 30z" style="fill: rgb(255, 255, 255);"></path>
<path d="M2306 1509 c-31 -25 -33 -49 -5 -74 19 -19 21 -19 55 0 37 20 42 39 18 73 -19 27 -34 28 -68 1z" style="fill: rgb(255, 255, 255);"></path>
<path d="M1403 1465 c-87 -40 -264 -93 -354 -106 -80 -12 -91 -11 -165 10 l-79 23 -65 -22 c-107 -36 -126 -52 -170 -145 -42 -88 -49 -125 -27 -144 16 -13 123 -31 223 -38 64 -5 76 -2 130 25 71 36 79 44 93 97 6 22 16 49 24 58 7 10 111 69 232 131 120 62 221 118 223 125 5 16 -7 14 -65 -14z" style="fill: rgb(255, 255, 255);"></path>
<path d="M1762 1437 c-29 -30 -28 -53 3 -73 48 -31 98 12 73 64 -17 35 -48 39 -76 9z" style="fill: rgb(255, 255, 255);"></path>
<path d="M2181 1436 c-28 -30 -24 -57 12 -74 24 -12 31 -11 53 2 31 21 30 37 -2 70 -33 32 -35 32 -63 2z" style="fill: rgb(255, 255, 255);"></path>
<path d="M2486 1429 c3 -6 61 -47 128 -90 66 -44 135 -96 152 -116 30 -34 35 -36 95 -37 58 -1 64 1 67 20 5 35 -57 81 -120 89 -52 7 -124 41 -235 112 -50 32 -102 45 -87 22z" style="fill: rgb(255, 255, 255);"></path>
<path d="M1896 1414 c-33 -32 -10 -94 35 -94 23 0 59 34 59 55 0 21 -36 55 -59 55 -11 0 -27 -7 -35 -16z" style="fill: rgb(255, 255, 255);"></path>
<path d="M2036 1404 c-21 -21 -20 -47 2 -67 23 -21 56 -22 76 -1 32 32 8 84 -39 84 -13 0 -31 -7 -39 -16z" style="fill: rgb(255, 255, 255);"></path>
<path d="M1462 1360 c-66 -35 -100 -46 -240 -80 -49 -13 -82 -41 -82 -70 0 -18 7 -20 60 -20 37 0 74 7 93 17 58 30 267 173 267 183 0 16 -21 10 -98 -30z" style="fill: rgb(255, 255, 255);"></path>
<path d="M2350 1357 c0 -16 53 -64 212 -190 54 -43 105 -89 114 -103 9 -13 20 -58 24 -98 7 -76 22 -107 73 -154 19 -18 56 -30 147 -48 68 -14 137 -24 154 -22 28 3 31 7 33 38 2 19 8 65 14 101 14 82 8 109 -37 158 -52 58 -112 82 -226 91 -92 7 -103 11 -200 62 -90 48 -213 119 -285 166 -20 13 -23 12 -23 -1z" style="fill: rgb(255, 255, 255);"></path>
<path d="M1518 1277 c-193 -126 -227 -142 -312 -139 -84 2 -146 -23 -213 -87 -48 -46 -56 -79 -51 -201 l3 -75 99 -9 c121 -10 158 0 217 58 51 50 58 69 52 129 -9 76 7 98 171 234 149 124 176 149 176 165 0 15 -16 7 -142 -75z" style="fill: rgb(255, 255, 255);"></path>
<path d="M2276 1321 c-9 -13 56 -139 102 -199 18 -24 47 -70 64 -102 33 -63 67 -87 129 -92 l34 -3 -2 48 c-2 56 -25 97 -54 97 -35 0 -53 16 -144 122 -124 144 -122 142 -129 129z" style="fill: rgb(255, 255, 255);"></path>
<path d="M1664 1221 c-48 -46 -109 -92 -150 -113 -76 -40 -97 -59 -113 -100 -21 -57 12 -73 88 -42 24 10 51 32 72 62 19 26 69 91 112 145 43 54 77 104 75 112 -2 8 -36 -19 -84 -64z" style="fill: rgb(255, 255, 255);"></path>
<path d="M2180 1281 c0 -30 46 -152 112 -296 72 -155 78 -186 49 -243 -28 -55 -26 -98 7 -162 40 -79 64 -93 180 -101 53 -4 116 -11 138 -14 23 -4 44 -3 47 1 3 5 12 61 22 125 15 103 15 120 2 150 -41 94 -112 149 -194 149 -41 0 -58 5 -83 27 -38 31 -160 202 -222 308 -44 76 -58 90 -58 56z" style="fill: rgb(255, 255, 255);"></path>
<path d="M1986 1208 c-3 -29 -8 -120 -11 -203 -7 -166 -21 -299 -36 -328 -9 -15 -18 -17 -67 -11 -49 5 -61 3 -85 -16 -36 -28 -60 -78 -82 -167 -17 -71 -17 -73 4 -116 17 -34 33 -50 77 -73 59 -31 108 -73 162 -142 18 -23 41 -42 50 -42 10 0 40 17 68 38 27 20 89 66 137 101 67 49 89 72 96 97 17 63 -9 198 -50 256 -19 26 -68 49 -99 46 -32 -3 -48 3 -54 17 -7 18 -72 444 -81 533 -4 34 -11 62 -15 62 -5 0 -11 -24 -14 -52z" style="fill: rgb(255, 255, 255);"></path>
<path d="M1755 1144 c-164 -224 -207 -264 -281 -264 -26 0 -53 -8 -75 -23 -44 -30 -106 -112 -113 -151 -5 -32 25 -231 38 -243 4 -4 60 -6 124 -4 134 3 135 4 203 105 45 67 49 101 19 176 -11 28 -20 61 -20 73 0 12 43 108 96 213 53 105 94 199 93 209 -3 13 -28 -15 -84 -91z" style="fill: rgb(255, 255, 255);"></path>
<path d="M1904 1239 c-6 -8 -25 -57 -43 -109 -34 -96 -79 -194 -112 -242 -35 -48 -20 -158 21 -158 29 0 77 27 90 49 5 11 10 52 10 92 0 40 12 132 26 205 26 137 29 190 8 163z" style="fill: rgb(255, 255, 255);"></path>
<path d="M2094 1233 c3 -10 15 -70 27 -133 23 -124 27 -204 15 -261 -8 -34 -5 -40 34 -83 23 -25 48 -46 56 -46 13 0 74 98 74 118 0 6 -11 21 -24 34 -16 14 -46 79 -80 171 -31 82 -63 164 -72 183 -17 35 -39 48 -30 17z" style="fill: rgb(255, 255, 255);"></path>
</g>
</svg>
</pattern>
</g>
</svg>
<svg class="saree-top-detailed saree detailed_indi" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 121.000000 95.000000" preserveAspectRatio="xMidYMid meet" style="display: block;">
<g transform="translate(0.000000,95.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<rect class="path_saree" x="10" y="10" width="1200px" height="500px" fill="black" stroke="black" style="fill: rgb(25, 36, 112);"></rect>
<rect class="path_saree_img" x="10" y="10" width="1200px" height="500px" fill="black" stroke="black" style="display: block; fill: url("#saree_pattern_img");"></rect>
</g>
</svg>任何帮助都是非常感谢的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-02-10 19:52:04
为了简化代码，我做了一些修改。我把莲花放在一个符号里。在模式中，我使用的是带有<use>的符号。因为符号有一个viewBox，所以您可以根据需要调整它的大小。在这种情况下，我使用的是width="37.7" height="22.9"。请注意，我保持相同的高宽比。(文号为viewBox="150 110 3770 2290")
该模式还有一个width="37.7“height="22.9”。在这种情况下，我使用的宽度和高度相同的使用元素和莲花是相互配合的。
<svg class="saree-top saree" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 1220 500" preserveAspectRatio="xMidYMid meet">
<symbol id="saree_img" viewBox="150 110 3770 2290">
<path d="M2865 2381 c-44 -10 -90 -23 -102 -29 -49 -27 -55 -80 -18 -160 37 -80 34 -113 -17 -166 -30 -30 -62 -50 -106 -66 -54 -20 -61 -25 -45 -34 26 -15 132 -10 176 8 20 9 62 39 92 66 40 36 69 53 112 65 90 25 121 42 139 76 20 40 16 62 -35 172 l-41 87 -37 -1 c-21 -1 -74 -9 -118 -18z" ></path>
<path d="M992 2351 c-18 -11 -52 -133 -52 -183 0 -49 44 -100 102 -117 24 -8 57 -18 75 -23 18 -5 66 -36 107 -69 83 -66 118 -81 156 -67 l25 10 -25 10 c-93 37 -117 59 -127 121 -4 27 2 51 27 101 l32 66 -25 54 c-31 67 -56 81 -162 89 -44 3 -89 9 -100 12 -11 3 -26 1 -33 -4z" ></path>
<path d="M3175 2136 c-35 -15 -90 -74 -112 -121 -15 -30 -14 -37 1 -75 l16 -42 -28 -26 c-49 -46 -135 -82 -246 -104 -58 -12 -106 -25 -106 -29 0 -15 150 -10 220 6 36 9 106 32 155 53 85 35 96 37 207 38 110 1 120 3 158 28 53 35 67 64 52 113 -6 21 -14 64 -18 96 -4 32 -10 60 -14 62 -5 3 -64 7 -132 10 -88 3 -132 0 -153 -9z" ></path>
<path d="M557 2123 c-4 -3 -7 -14 -7 -23 0 -9 -11 -38 -25 -64 -14 -26 -25 -58 -25 -71 0 -31 43 -81 93 -107 36 -18 51 -19 141 -13 90 6 106 4 151 -15 28 -12 91 -33 140 -46 155 -43 432 -42 438 1 1 6 -52 12 -133 16 -142 6 -206 22 -314 76 -80 40 -88 50 -80 101 6 41 4 46 -32 84 -57 59 -85 68 -222 68 -65 0 -122 -3 -125 -7z" ></path>
<path d="M1933 2102 c-56 -31 -78 -69 -78 -139 0 -72 19 -105 81 -140 72 -42 153 -22 205 50 54 74 33 180 -43 227 -41 25 -121 26 -165 2z" ></path>
<path d="M1017 1974 c-8 -8 2 -35 22 -58 31 -36 205 -96 242 -84 13 4 -114 105 -169 134 -27 14 -84 19 -95 8z" ></path>
<path d="M2930 1949 c-14 -6 -41 -25 -60 -44 -20 -19 -65 -46 -100 -61 -84 -34 -94 -44 -43 -44 47 0 220 54 246 77 10 9 17 30 17 50 0 36 -13 41 -60 22z" ></path>
<path d="M1734 1876 l-39 -33 20 -38 c28 -52 90 -112 150 -143 44 -24 61 -27 150 -27 89 0 105 3 151 27 51 27 127 102 147 146 9 20 5 28 -28 62 -22 22 -46 40 -55 40 -8 0 -26 -20 -39 -44 -13 -25 -40 -57 -61 -71 -102 -71 -216 -46 -296 65 -20 27 -41 50 -48 50 -7 0 -30 -15 -52 -34z" ></path>
<path d="M3524 1811 c-26 -12 -57 -40 -85 -77 -25 -33 -64 -69 -86 -82 -121 -67 -410 -70 -627 -6 -105 30 -50 -12 65 -50 85 -29 186 -41 404 -52 l149 -7 46 -47 c39 -40 55 -50 104 -60 32 -7 96 -10 141 -8 77 3 86 5 122 36 21 18 66 54 100 80 40 30 62 54 63 68 0 32 -175 199 -225 213 -59 16 -124 13 -171 -8z" ></path>
<path d="M1611 1784 c-27 -34 -27 -41 7 -95 54 -83 156 -160 255 -191 104 -32 246 -19 355 34 90 43 221 192 206 233 -4 8 -15 20 -25 25 -37 20 -58 11 -99 -45 -48 -65 -113 -115 -182 -140 -73 -26 -195 -18 -268 19 -59 29 -138 101 -171 154 -25 39 -51 41 -78 6z"></path>
<path d="M365 1768 c-11 -7 -64 -45 -117 -85 -119 -90 -123 -103 -47 -163 29 -22 64 -58 80 -79 34 -47 96 -71 186 -71 97 0 152 28 198 101 l23 36 134 7 c206 11 392 46 516 97 84 35 59 55 -29 23 -256 -90 -590 -60 -656 61 -33 61 -87 85 -187 85 -45 0 -90 -6 -101 -12z"></path>
<path d="M782 1768 c-19 -19 -15 -32 23 -71 32 -33 40 -36 93 -36 31 0 118 -3 192 -6 112 -5 147 -3 204 12 87 23 104 48 24 36 -83 -12 -258 -9 -315 5 -33 9 -60 24 -77 43 -23 25 -33 29 -79 29 -29 0 -58 -5 -65 -12z" ></path>
<path d="M3150 1736 c-41 -22 -62 -24 -239 -29 -106 -3 -195 -8 -198 -11 -6 -6 1 -9 62 -26 47 -13 396 -26 447 -16 35 6 88 46 88 65 0 9 -83 41 -104 41 -6 -1 -31 -11 -56 -24z" ></path>
<path d="M1470 1730 c-24 -24 -24 -29 -4 -58 22 -31 69 -30 90 3 15 23 15 27 0 50 -20 31 -58 33 -86 5z" ></path>
<path d="M2482 1729 c-30 -11 -39 -54 -17 -79 25 -28 61 -25 81 5 30 47 -10 94 -64 74z"></path>
<path d="M1532 1610 c-16 -27 -15 -41 7 -67 24 -29 42 -29 69 0 28 29 28 41 0 67 -28 25 -60 26 -76 0z"></path>
<path d="M2400 1591 c-16 -31 -12 -49 15 -67 21 -14 31 -15 50 -6 24 11 30 27 25 62 -5 34 -73 42 -90 11z" ></path>
<path d="M2647 1581 c35 -29 166 -80 270 -106 51 -13 113 -31 137 -40 49 -19 99 -15 132 10 19 15 19 15 0 30 -20 15 -53 22 -257 54 -75 12 -169 32 -209 46 -87 30 -103 31 -73 6z"></path>
<path d="M1325 1535 c-149 -55 -227 -71 -276 -56 -38 11 -45 10 -96 -15 -47 -23 -53 -28 -41 -41 35 -34 82 -28 277 36 103 35 206 73 227 86 55 34 20 30 -91 -10z"></path>
<path d="M1639 1521 c-20 -16 -22 -23 -14 -47 6 -18 21 -33 39 -39 24 -8 31 -6 47 14 22 27 24 41 7 63 -21 27 -53 30 -79 9z"></path>
<path d="M2580 1525 c26 -31 190 -131 307 -187 68 -32 127 -67 133 -78 5 -10 10 -34 10 -53 0 -42 41 -87 115 -124 l49 -26 121 18 c66 10 127 21 135 26 9 4 20 36 28 76 7 37 15 80 19 95 11 56 -3 78 -75 111 -86 39 -154 42 -232 8 -44 -19 -65 -22 -110 -18 -87 10 -293 73 -396 122 -99 48 -125 55 -104 30z"></path>
<path d="M2306 1509 c-31 -25 -33 -49 -5 -74 19 -19 21 -19 55 0 37 20 42 39 18 73 -19 27 -34 28 -68 1z"></path>
<path d="M1403 1465 c-87 -40 -264 -93 -354 -106 -80 -12 -91 -11 -165 10 l-79 23 -65 -22 c-107 -36 -126 -52 -170 -145 -42 -88 -49 -125 -27 -144 16 -13 123 -31 223 -38 64 -5 76 -2 130 25 71 36 79 44 93 97 6 22 16 49 24 58 7 10 111 69 232 131 120 62 221 118 223 125 5 16 -7 14 -65 -14z"></path>
<path d="M1762 1437 c-29 -30 -28 -53 3 -73 48 -31 98 12 73 64 -17 35 -48 39 -76 9z" ></path>
<path d="M2181 1436 c-28 -30 -24 -57 12 -74 24 -12 31 -11 53 2 31 21 30 37 -2 70 -33 32 -35 32 -63 2z" ></path>
<path d="M2486 1429 c3 -6 61 -47 128 -90 66 -44 135 -96 152 -116 30 -34 35 -36 95 -37 58 -1 64 1 67 20 5 35 -57 81 -120 89 -52 7 -124 41 -235 112 -50 32 -102 45 -87 22z" ></path>
<path d="M1896 1414 c-33 -32 -10 -94 35 -94 23 0 59 34 59 55 0 21 -36 55 -59 55 -11 0 -27 -7 -35 -16z" ></path>
<path d="M2036 1404 c-21 -21 -20 -47 2 -67 23 -21 56 -22 76 -1 32 32 8 84 -39 84 -13 0 -31 -7 -39 -16z"></path>
<path d="M1462 1360 c-66 -35 -100 -46 -240 -80 -49 -13 -82 -41 -82 -70 0 -18 7 -20 60 -20 37 0 74 7 93 17 58 30 267 173 267 183 0 16 -21 10 -98 -30z" ></path>
<path d="M2350 1357 c0 -16 53 -64 212 -190 54 -43 105 -89 114 -103 9 -13 20 -58 24 -98 7 -76 22 -107 73 -154 19 -18 56 -30 147 -48 68 -14 137 -24 154 -22 28 3 31 7 33 38 2 19 8 65 14 101 14 82 8 109 -37 158 -52 58 -112 82 -226 91 -92 7 -103 11 -200 62 -90 48 -213 119 -285 166 -20 13 -23 12 -23 -1z" ></path>
<path d="M1518 1277 c-193 -126 -227 -142 -312 -139 -84 2 -146 -23 -213 -87 -48 -46 -56 -79 -51 -201 l3 -75 99 -9 c121 -10 158 0 217 58 51 50 58 69 52 129 -9 76 7 98 171 234 149 124 176 149 176 165 0 15 -16 7 -142 -75z" ></path>
<path d="M2276 1321 c-9 -13 56 -139 102 -199 18 -24 47 -70 64 -102 33 -63 67 -87 129 -92 l34 -3 -2 48 c-2 56 -25 97 -54 97 -35 0 -53 16 -144 122 -124 144 -122 142 -129 129z" ></path>
<path d="M1664 1221 c-48 -46 -109 -92 -150 -113 -76 -40 -97 -59 -113 -100 -21 -57 12 -73 88 -42 24 10 51 32 72 62 19 26 69 91 112 145 43 54 77 104 75 112 -2 8 -36 -19 -84 -64z"
></path>
<path d="M2180 1281 c0 -30 46 -152 112 -296 72 -155 78 -186 49 -243 -28 -55 -26 -98 7 -162 40 -79 64 -93 180 -101 53 -4 116 -11 138 -14 23 -4 44 -3 47 1 3 5 12 61 22 125 15 103 15 120 2 150 -41 94 -112 149 -194 149 -41 0 -58 5 -83 27 -38 31 -160 202 -222 308 -44 76 -58 90 -58 56z"
></path>
<path d="M1986 1208 c-3 -29 -8 -120 -11 -203 -7 -166 -21 -299 -36 -328 -9 -15 -18 -17 -67 -11 -49 5 -61 3 -85 -16 -36 -28 -60 -78 -82 -167 -17 -71 -17 -73 4 -116 17 -34 33 -50 77 -73 59 -31 108 -73 162 -142 18 -23 41 -42 50 -42 10 0 40 17 68 38 27 20 89 66 137 101 67 49 89 72 96 97 17 63 -9 198 -50 256 -19 26 -68 49 -99 46 -32 -3 -48 3 -54 17 -7 18 -72 444 -81 533 -4 34 -11 62 -15 62 -5 0 -11 -24 -14 -52z" ></path>
<path d="M1755 1144 c-164 -224 -207 -264 -281 -264 -26 0 -53 -8 -75 -23 -44 -30 -106 -112 -113 -151 -5 -32 25 -231 38 -243 4 -4 60 -6 124 -4 134 3 135 4 203 105 45 67 49 101 19 176 -11 28 -20 61 -20 73 0 12 43 108 96 213 53 105 94 199 93 209 -3 13 -28 -15 -84 -91z" ></path>
<path d="M1904 1239 c-6 -8 -25 -57 -43 -109 -34 -96 -79 -194 -112 -242 -35 -48 -20 -158 21 -158 29 0 77 27 90 49 5 11 10 52 10 92 0 40 12 132 26 205 26 137 29 190 8 163z" ></path>
<path d="M2094 1233 c3 -10 15 -70 27 -133 23 -124 27 -204 15 -261 -8 -34 -5 -40 34 -83 23 -25 48 -46 56 -46 13 0 74 98 74 118 0 6 -11 21 -24 34 -16 14 -46 79 -80 171 -31 82 -63 164 -72 183 -17 35 -39 48 -30 17z" ></path>
</symbol>
<pattern id="saree_pattern_img" width="37.7" height="22.9" x="15" y="11" patternUnits="userSpaceOnUse" >
<use href="#saree_img" width="37.7" height="22.9" fill="white"/>
</pattern>
<rect class="path_saree" x="10" y="10" width="1200" height="500" stroke="black" style="fill: rgb(25, 36, 112);"></rect>
<rect class="path_saree" x="10" y="10" width="1200" height="500" fill="url(#saree_pattern_img)"></rect>
</svg>
为了增加花之间的空间，你可以改变花型的宽度和高度。例如，尝试width="50“height=50。
在下一个演示中，您可以使用滑块来更改图案的宽度和高度。
w.addEventListener("input", ()=>{saree_pattern_img.setAttribute("width",w.value)})
h.addEventListener("input", ()=>{saree_pattern_img.setAttribute("height",h.value)})<p>width:<input type="range" id="w" min="37.7" max="200" value="50" /></p>
<p>height:<input type="range" id="h" min="22.9" max="200" value="50" /></p>
<svg class="saree-top saree" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 1220 500" preserveAspectRatio="xMidYMid meet">
<symbol id="saree_img" viewBox="150 110 3770 2290">
<path d="M2865 2381 c-44 -10 -90 -23 -102 -29 -49 -27 -55 -80 -18 -160 37 -80 34 -113 -17 -166 -30 -30 -62 -50 -106 -66 -54 -20 -61 -25 -45 -34 26 -15 132 -10 176 8 20 9 62 39 92 66 40 36 69 53 112 65 90 25 121 42 139 76 20 40 16 62 -35 172 l-41 87 -37 -1 c-21 -1 -74 -9 -118 -18z"></path>
<path d="M992 2351 c-18 -11 -52 -133 -52 -183 0 -49 44 -100 102 -117 24 -8 57 -18 75 -23 18 -5 66 -36 107 -69 83 -66 118 -81 156 -67 l25 10 -25 10 c-93 37 -117 59 -127 121 -4 27 2 51 27 101 l32 66 -25 54 c-31 67 -56 81 -162 89 -44 3 -89 9 -100 12 -11 3 -26 1 -33 -4z"></path>
<path d="M3175 2136 c-35 -15 -90 -74 -112 -121 -15 -30 -14 -37 1 -75 l16 -42 -28 -26 c-49 -46 -135 -82 -246 -104 -58 -12 -106 -25 -106 -29 0 -15 150 -10 220 6 36 9 106 32 155 53 85 35 96 37 207 38 110 1 120 3 158 28 53 35 67 64 52 113 -6 21 -14 64 -18 96 -4 32 -10 60 -14 62 -5 3 -64 7 -132 10 -88 3 -132 0 -153 -9z"></path>
<path d="M557 2123 c-4 -3 -7 -14 -7 -23 0 -9 -11 -38 -25 -64 -14 -26 -25 -58 -25 -71 0 -31 43 -81 93 -107 36 -18 51 -19 141 -13 90 6 106 4 151 -15 28 -12 91 -33 140 -46 155 -43 432 -42 438 1 1 6 -52 12 -133 16 -142 6 -206 22 -314 76 -80 40 -88 50 -80 101 6 41 4 46 -32 84 -57 59 -85 68 -222 68 -65 0 -122 -3 -125 -7z"></path>
<path d="M1933 2102 c-56 -31 -78 -69 -78 -139 0 -72 19 -105 81 -140 72 -42 153 -22 205 50 54 74 33 180 -43 227 -41 25 -121 26 -165 2z"></path>
<path d="M1017 1974 c-8 -8 2 -35 22 -58 31 -36 205 -96 242 -84 13 4 -114 105 -169 134 -27 14 -84 19 -95 8z"></path>
<path d="M2930 1949 c-14 -6 -41 -25 -60 -44 -20 -19 -65 -46 -100 -61 -84 -34 -94 -44 -43 -44 47 0 220 54 246 77 10 9 17 30 17 50 0 36 -13 41 -60 22z"></path>
<path d="M1734 1876 l-39 -33 20 -38 c28 -52 90 -112 150 -143 44 -24 61 -27 150 -27 89 0 105 3 151 27 51 27 127 102 147 146 9 20 5 28 -28 62 -22 22 -46 40 -55 40 -8 0 -26 -20 -39 -44 -13 -25 -40 -57 -61 -71 -102 -71 -216 -46 -296 65 -20 27 -41 50 -48 50 -7 0 -30 -15 -52 -34z"></path>
<path d="M3524 1811 c-26 -12 -57 -40 -85 -77 -25 -33 -64 -69 -86 -82 -121 -67 -410 -70 -627 -6 -105 30 -50 -12 65 -50 85 -29 186 -41 404 -52 l149 -7 46 -47 c39 -40 55 -50 104 -60 32 -7 96 -10 141 -8 77 3 86 5 122 36 21 18 66 54 100 80 40 30 62 54 63 68 0 32 -175 199 -225 213 -59 16 -124 13 -171 -8z"></path>
<path d="M1611 1784 c-27 -34 -27 -41 7 -95 54 -83 156 -160 255 -191 104 -32 246 -19 355 34 90 43 221 192 206 233 -4 8 -15 20 -25 25 -37 20 -58 11 -99 -45 -48 -65 -113 -115 -182 -140 -73 -26 -195 -18 -268 19 -59 29 -138 101 -171 154 -25 39 -51 41 -78 6z"></path>
<path d="M365 1768 c-11 -7 -64 -45 -117 -85 -119 -90 -123 -103 -47 -163 29 -22 64 -58 80 -79 34 -47 96 -71 186 -71 97 0 152 28 198 101 l23 36 134 7 c206 11 392 46 516 97 84 35 59 55 -29 23 -256 -90 -590 -60 -656 61 -33 61 -87 85 -187 85 -45 0 -90 -6 -101 -12z"></path>
<path d="M782 1768 c-19 -19 -15 -32 23 -71 32 -33 40 -36 93 -36 31 0 118 -3 192 -6 112 -5 147 -3 204 12 87 23 104 48 24 36 -83 -12 -258 -9 -315 5 -33 9 -60 24 -77 43 -23 25 -33 29 -79 29 -29 0 -58 -5 -65 -12z"></path>
<path d="M3150 1736 c-41 -22 -62 -24 -239 -29 -106 -3 -195 -8 -198 -11 -6 -6 1 -9 62 -26 47 -13 396 -26 447 -16 35 6 88 46 88 65 0 9 -83 41 -104 41 -6 -1 -31 -11 -56 -24z"></path>
<path d="M1470 1730 c-24 -24 -24 -29 -4 -58 22 -31 69 -30 90 3 15 23 15 27 0 50 -20 31 -58 33 -86 5z"></path>
<path d="M2482 1729 c-30 -11 -39 -54 -17 -79 25 -28 61 -25 81 5 30 47 -10 94 -64 74z"></path>
<path d="M1532 1610 c-16 -27 -15 -41 7 -67 24 -29 42 -29 69 0 28 29 28 41 0 67 -28 25 -60 26 -76 0z"></path>
<path d="M2400 1591 c-16 -31 -12 -49 15 -67 21 -14 31 -15 50 -6 24 11 30 27 25 62 -5 34 -73 42 -90 11z"></path>
<path d="M2647 1581 c35 -29 166 -80 270 -106 51 -13 113 -31 137 -40 49 -19 99 -15 132 10 19 15 19 15 0 30 -20 15 -53 22 -257 54 -75 12 -169 32 -209 46 -87 30 -103 31 -73 6z"></path>
<path d="M1325 1535 c-149 -55 -227 -71 -276 -56 -38 11 -45 10 -96 -15 -47 -23 -53 -28 -41 -41 35 -34 82 -28 277 36 103 35 206 73 227 86 55 34 20 30 -91 -10z"></path>
<path d="M1639 1521 c-20 -16 -22 -23 -14 -47 6 -18 21 -33 39 -39 24 -8 31 -6 47 14 22 27 24 41 7 63 -21 27 -53 30 -79 9z"></path>
<path d="M2580 1525 c26 -31 190 -131 307 -187 68 -32 127 -67 133 -78 5 -10 10 -34 10 -53 0 -42 41 -87 115 -124 l49 -26 121 18 c66 10 127 21 135 26 9 4 20 36 28 76 7 37 15 80 19 95 11 56 -3 78 -75 111 -86 39 -154 42 -232 8 -44 -19 -65 -22 -110 -18 -87 10 -293 73 -396 122 -99 48 -125 55 -104 30z"></path>
<path d="M2306 1509 c-31 -25 -33 -49 -5 -74 19 -19 21 -19 55 0 37 20 42 39 18 73 -19 27 -34 28 -68 1z"></path>
<path d="M1403 1465 c-87 -40 -264 -93 -354 -106 -80 -12 -91 -11 -165 10 l-79 23 -65 -22 c-107 -36 -126 -52 -170 -145 -42 -88 -49 -125 -27 -144 16 -13 123 -31 223 -38 64 -5 76 -2 130 25 71 36 79 44 93 97 6 22 16 49 24 58 7 10 111 69 232 131 120 62 221 118 223 125 5 16 -7 14 -65 -14z"></path>
<path d="M1762 1437 c-29 -30 -28 -53 3 -73 48 -31 98 12 73 64 -17 35 -48 39 -76 9z"></path>
<path d="M2181 1436 c-28 -30 -24 -57 12 -74 24 -12 31 -11 53 2 31 21 30 37 -2 70 -33 32 -35 32 -63 2z"></path>
<path d="M2486 1429 c3 -6 61 -47 128 -90 66 -44 135 -96 152 -116 30 -34 35 -36 95 -37 58 -1 64 1 67 20 5 35 -57 81 -120 89 -52 7 -124 41 -235 112 -50 32 -102 45 -87 22z"></path>
<path d="M1896 1414 c-33 -32 -10 -94 35 -94 23 0 59 34 59 55 0 21 -36 55 -59 55 -11 0 -27 -7 -35 -16z"></path>
<path d="M2036 1404 c-21 -21 -20 -47 2 -67 23 -21 56 -22 76 -1 32 32 8 84 -39 84 -13 0 -31 -7 -39 -16z"></path>
<path d="M1462 1360 c-66 -35 -100 -46 -240 -80 -49 -13 -82 -41 -82 -70 0 -18 7 -20 60 -20 37 0 74 7 93 17 58 30 267 173 267 183 0 16 -21 10 -98 -30z"></path>
<path d="M2350 1357 c0 -16 53 -64 212 -190 54 -43 105 -89 114 -103 9 -13 20 -58 24 -98 7 -76 22 -107 73 -154 19 -18 56 -30 147 -48 68 -14 137 -24 154 -22 28 3 31 7 33 38 2 19 8 65 14 101 14 82 8 109 -37 158 -52 58 -112 82 -226 91 -92 7 -103 11 -200 62 -90 48 -213 119 -285 166 -20 13 -23 12 -23 -1z"></path>
<path d="M1518 1277 c-193 -126 -227 -142 -312 -139 -84 2 -146 -23 -213 -87 -48 -46 -56 -79 -51 -201 l3 -75 99 -9 c121 -10 158 0 217 58 51 50 58 69 52 129 -9 76 7 98 171 234 149 124 176 149 176 165 0 15 -16 7 -142 -75z"></path>
<path d="M2276 1321 c-9 -13 56 -139 102 -199 18 -24 47 -70 64 -102 33 -63 67 -87 129 -92 l34 -3 -2 48 c-2 56 -25 97 -54 97 -35 0 -53 16 -144 122 -124 144 -122 142 -129 129z"></path>
<path d="M1664 1221 c-48 -46 -109 -92 -150 -113 -76 -40 -97 -59 -113 -100 -21 -57 12 -73 88 -42 24 10 51 32 72 62 19 26 69 91 112 145 43 54 77 104 75 112 -2 8 -36 -19 -84 -64z"></path>
<path d="M2180 1281 c0 -30 46 -152 112 -296 72 -155 78 -186 49 -243 -28 -55 -26 -98 7 -162 40 -79 64 -93 180 -101 53 -4 116 -11 138 -14 23 -4 44 -3 47 1 3 5 12 61 22 125 15 103 15 120 2 150 -41 94 -112 149 -194 149 -41 0 -58 5 -83 27 -38 31 -160 202 -222 308 -44 76 -58 90 -58 56z"></path>
<path d="M1986 1208 c-3 -29 -8 -120 -11 -203 -7 -166 -21 -299 -36 -328 -9 -15 -18 -17 -67 -11 -49 5 -61 3 -85 -16 -36 -28 -60 -78 -82 -167 -17 -71 -17 -73 4 -116 17 -34 33 -50 77 -73 59 -31 108 -73 162 -142 18 -23 41 -42 50 -42 10 0 40 17 68 38 27 20 89 66 137 101 67 49 89 72 96 97 17 63 -9 198 -50 256 -19 26 -68 49 -99 46 -32 -3 -48 3 -54 17 -7 18 -72 444 -81 533 -4 34 -11 62 -15 62 -5 0 -11 -24 -14 -52z"></path>
<path d="M1755 1144 c-164 -224 -207 -264 -281 -264 -26 0 -53 -8 -75 -23 -44 -30 -106 -112 -113 -151 -5 -32 25 -231 38 -243 4 -4 60 -6 124 -4 134 3 135 4 203 105 45 67 49 101 19 176 -11 28 -20 61 -20 73 0 12 43 108 96 213 53 105 94 199 93 209 -3 13 -28 -15 -84 -91z"></path>
<path d="M1904 1239 c-6 -8 -25 -57 -43 -109 -34 -96 -79 -194 -112 -242 -35 -48 -20 -158 21 -158 29 0 77 27 90 49 5 11 10 52 10 92 0 40 12 132 26 205 26 137 29 190 8 163z"></path>
<path d="M2094 1233 c3 -10 15 -70 27 -133 23 -124 27 -204 15 -261 -8 -34 -5 -40 34 -83 23 -25 48 -46 56 -46 13 0 74 98 74 118 0 6 -11 21 -24 34 -16 14 -46 79 -80 171 -31 82 -63 164 -72 183 -17 35 -39 48 -30 17z"></path>
</symbol>
<pattern id="saree_pattern_img" width="50" height="50" x="15" y="11" patternUnits="userSpaceOnUse">
<use href="#saree_img" width="37.7" height="22.9" fill="white" />
</pattern>
<rect class="path_saree" x="10" y="10" width="1200" height="500" stroke="black" style="fill: rgb(25, 36, 112);"></rect>
<rect class="path_saree" x="10" y="10" width="1200" height="500" fill="url(#saree_pattern_img)"></rect>
</svg>
注意:为了避免模式开始于填充的rect之外，并且由于符号的viewBox="150 3770 2290“，该模式使用的是x和y属性。x="15“y="11”。如果这对您不重要，您可以删除这些属性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71070794
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号