将 SVG 对象设置到特定位置答案

【问题标题】：Setting SVG objects to specific locations将 SVG 对象设置到特定位置
【发布时间】：2020-08-07 01:53:24
【问题描述】：

有没有办法可以将 SVG 对象移动到 Python 中的特定位置？我在这里有一个矢量格式的平面图，比如说我想在 (222, 382) 放置一个厕所图标。我找不到任何合适的库来实现这一点，所以任何建议都将不胜感激。使用 svgutils 我设法通过以下方式合并两个 SVG 文件

fplan = svgutils.transform.fromfile('floorplan.svg')
toilet = svgutils.transform.fromfile('toilet.svg')
fplan.append(toilet)
fplan.save('result.svg')

这是平面图

<svg width="781" height="480"
xmlns="http://www.w3.org/2000/svg">
<path d="M313 181 351 181 351 187 313 187 " style="stroke:black" class="wall 2"/>
<path d="M393 166 468 166 468 170 393 170 " style="stroke:black" class="wall 2"/>
<path d="M219 324 221 324 221 337 219 337 " style="stroke:black" class="wall 2"/>
<path d="M356 341 392 341 392 343 356 343 " style="stroke:black" class="wall 2"/>
<path d="M356 243 389 243 389 245 356 245 " style="stroke:black" class="wall 2"/>
<path d="M737 44 741 44 741 219 737 219 " style="stroke:black" class="wall 8"/>
<path d="M618 213 741 213 741 219 618 219 " style="stroke:black" class="wall 8"/>
<path d="M382 343 392 343 392 422 382 422 " style="stroke:black" class="wall 2"/>
<path d="M289 412 392 412 392 422 289 422 " style="stroke:black" class="wall 2"/>
<path d="M618 213 630 213 630 347 618 347 " style="stroke:black" class="wall 2"/>
<path d="M382 337 630 337 630 347 382 347 " style="stroke:black" class="wall 2"/>
<path d="M36 318 50 318 50 411 36 411 " style="stroke:black" class="wall 2"/>
<path d="M36 411 135 411 135 423 36 423 " style="stroke:black" class="wall 2"/>
<path d="M37 32 319 32 319 48 37 48 " style="stroke:black" class="wall 2"/>
<path d="M37 32 49 32 49 180 37 180 " style="stroke:black" class="wall 2"/>
<path d="M618 36 741 36 741 44 618 44 " style="stroke:black" class="wall 2"/>
<path d="M289 246 295 246 295 308 289 308 " style="stroke:black" class="wall 2"/>
<path d="M217 242 295 242 295 246 217 246 " style="stroke:black" class="wall 2"/>
<path d="M385 245 389 245 389 337 385 337 " style="stroke:black" class="wall 2"/>
<path d="M618 48 630 48 630 213 618 213 " style="stroke:black" class="wall 2"/>
<path d="M313 32 630 32 630 48 313 48 " style="stroke:black" class="wall 2"/>
<path d="M217 181 273 181 273 187 217 187 " style="stroke:black" class="wall 2"/>
<path d="M217 188 223 188 223 242 217 242 " style="stroke:black" class="wall 2"/>
<path d="M37 180 223 180 223 188 37 188 " style="stroke:black" class="wall 2"/>
<path d="M313 48 319 48 319 181 313 181 " style="stroke:black" class="wall 2"/>
<path d="M127 320 223 320 223 324 127 324 " style="stroke:black" class="wall 2"/>
<path d="M127 326 135 326 135 412 127 412 " style="stroke:black" class="wall 2"/>
<path d="M36 318 135 318 135 326 36 326 " style="stroke:black" class="wall 2"/>
<path d="M289 308 295 308 295 412 289 412 " style="stroke:black" class="wall 2"/>
<path d="M217 306 295 306 295 308 217 308 " style="stroke:black" class="wall 2"/>
<path d="M217 306 223 306 223 324 217 324 " style="stroke:black" class="wall 2"/>
<path d="M273 181 319 181 319 187 273 187 " style="stroke:black" class="wall 2"/>
<path d="M127 412 283 412 283 422 127 422 " style="stroke:black" class="wall 2"/>
<path d="M283 413 295 413 295 421 283 421 " style="stroke:black" class="wall 2"/>
<path d="M217 242 223 242 223 306 217 306 " style="stroke:black" class="wall 2"/>
<path d="M37 180 49 180 49 318 37 318 " style="stroke:black" class="wall 2"/>
<path d="M320 151 349 151 349 179 320 179 " style="fill-opacity: 1; stroke-opacity: 1;" fill="#ffffff" stroke="#000000 " class="icon 4"/>
<path d="M321 121 349 121 349 151 321 151 " style="fill-opacity: 1; stroke-opacity: 1;" fill="#ffffff" stroke="#000000 " class="icon 4"/>
<path d="M189 243 217 243 217 266 189 266 " style="fill-opacity: 1; stroke-opacity: 1;" fill="#ffffff" stroke="#000000 " class="icon 3"/>
<path d="M356 268 383 268 383 292 356 292 " style="fill-opacity: 1; stroke-opacity: 1;" fill="#ffffff" stroke="#000000 " class="icon 3"/>
<path d="M276 152 316 152 316 180 276 180 " style="fill-opacity: 1; stroke-opacity: 1;" fill="#ffffff" stroke="#000000 " class="icon 3"/>
<path d="M356 292 382 292 382 339 356 339 " style="fill-opacity: 1; stroke-opacity: 1;" fill="#ffffff" stroke="#000000 " class="icon 3"/>
<path d="M189 266 217 266 217 289 189 289 " style="fill-opacity: 1; stroke-opacity: 1;" fill="#ffffff" stroke="#000000 " class="icon 3"/>
<path d="M189 290 217 290 217 318 189 318 " style="fill-opacity: 1; stroke-opacity: 1;" fill="#ffffff" stroke="#000000 " class="icon 3"/>
<path d="M56 328 78 328 78 343 56 343 " style="fill-opacity: 1; stroke-opacity: 1;" fill="#ffffff" stroke="#000000 " class="icon 4"/>
<path d="M418 135 442 135 442 164 418 164 " style="fill-opacity: 1; stroke-opacity: 1;" fill="#ffffff" stroke="#000000 " class="icon 4"/>
<path d="M355 245 383 245 383 268 355 268 " style="fill-opacity: 1; stroke-opacity: 1;" fill="#ffffff" stroke="#000000 " class="icon 3"/>
<path d="M249 392 274 392 274 412 249 412 " style="stroke:black" class="icon 6"/>
<path d="M223 257 253 257 253 273 223 273 " style="stroke:black" class="icon 5"/>
<path d="M273 49 309 49 309 79 273 79 " style="fill-opacity: 1; stroke-opacity: 1;" fill="#ffffff" stroke="#000000 " class="icon 3"/>
<path d="M260 309 287 309 287 336 260 336 " style="fill-opacity: 1; stroke-opacity: 1;" fill="#ffffff" stroke="#000000 " class="icon 4"/>
<path d="M222 382 239 382 239 411 222 411 " style="stroke:black" class="icon 5"/>
<path d="M411 50 438 50 438 79 411 79 " style="fill-opacity: 1; stroke-opacity: 1;" fill="#ffffff" stroke="#000000 " class="icon 4"/>
<path d="M223 310 251 310 251 336 223 336 " style="fill-opacity: 1; stroke-opacity: 1;" fill="#ffffff" stroke="#000000 " class="icon 3"/>
<path d="M381 52 410 52 410 78 381 78 " style="stroke:black" class="icon 6"/>
<path d="M253 284 278 284 278 303 253 303 " style="stroke:black" class="icon 6"/>
<path d="M56 379 125 379 125 408 56 408 " style="stroke:black" class="icon 7"/>
<path d="M323 412 365 412 365 422 323 422 " style="stroke:black" class="icon 2"/>
<path d="M618 220 630 220 630 316 618 316 " fill="#f0f0ff" stroke="#000000" style="fill-opacity: 1; stroke-width: 1; stroke-opacity: 1;" class="icon 1"/>
<path d="M36 367 50 367 50 396 36 396 " fill="#f0f0ff" stroke="#000000" style="fill-opacity: 1; stroke-width: 1; stroke-opacity: 1;" class="icon 1"/>
<path d="M37 67 49 67 49 151 37 151 " fill="#f0f0ff" stroke="#000000" style="fill-opacity: 1; stroke-width: 1; stroke-opacity: 1;" class="icon 1"/>
<path d="M289 251 295 251 295 288 289 288 " style="stroke:black" class="icon 2"/>
<path d="M618 164 630 164 630 203 618 203 " style="stroke:black" class="icon 2"/>
<path d="M618 58 630 58 630 160 618 160 " fill="#f0f0ff" stroke="#000000" style="fill-opacity: 1; stroke-width: 1; stroke-opacity: 1;" class="icon 1"/>
<path d="M227 181 264 181 264 187 227 187 " style="stroke:black" class="icon 2"/>
<path d="M217 191 223 191 223 228 217 228 " style="stroke:black" class="icon 2"/>
<path d="M127 329 135 329 135 367 127 367 " style="stroke:black" class="icon 2"/>
<path d="M289 342 295 342 295 379 289 379 " style="stroke:black" class="icon 2"/>
<path d="M37 196 49 196 49 282 37 282 " fill="#f0f0ff" stroke="#000000" style="fill-opacity: 1; stroke-width: 1; stroke-opacity: 1;" class="icon 1"/>

这是厕所图标

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 23.92 36.54" width="23.92" height="36.54">
    <defs>
        <path d="M1.99 36.54C3.99 36.54 19.93 36.54 21.93 36.54C23.03 36.54 23.92 35.65 23.92 34.55C23.92 33.95 23.92 29.17 23.92 28.57C23.92 27.47 23.03 26.58 21.93 26.58C19.93 26.58 3.99 26.58 1.99 26.58C0.89 26.58 0 27.47 0 28.57C0 29.76 0 33.35 0 34.55C0 35.65 0.89 36.54 1.99 36.54Z" id="a2eDjbk0uV"></path>
        <path d="M1.99 36.54C3.99 36.54 19.93 36.54 21.93 36.54C23.03 36.54 23.92 35.65 23.92 34.55C23.92 33.95 23.92 29.17 23.92 28.57C23.92 27.47 23.03 26.58 21.93 26.58C19.93 26.58 3.99 26.58 1.99 26.58C0.89 26.58 0 27.47 0 28.57C0 29.76 0 33.35 0 34.55C0 35.65 0.89 36.54 1.99 36.54Z" id="e5wOq9mEa8"></path>
        <path d="M11.96 0C20.6 0 27.24 12.79 20.6 26.58C17.14 26.58 6.78 26.58 3.32 26.58C-3.32 12.79 3.32 0 11.96 0Z" id="a9PrqQ5EK"></path>
        <path d="M11.96 0C20.6 0 27.24 12.79 20.6 26.58C17.14 26.58 6.78 26.58 3.32 26.58C-3.32 12.79 3.32 0 11.96 0Z" id="bZhtURMbo"></path>
        <path d="M1.99 36.54C3.99 36.54 19.93 36.54 21.93 36.54C23.03 36.54 23.92 35.65 23.92 34.55C23.92 33.95 23.92 29.17 23.92 28.57C23.92 27.47 23.03 26.58 21.93 26.58C19.93 26.58 3.99 26.58 1.99 26.58C0.89 26.58 0 27.47 0 28.57C0 29.76 0 33.35 0 34.55C0 35.65 0.89 36.54 1.99 36.54Z" id="b11tFtOzmt"></path>
        <path d="M1.99 36.54C3.99 36.54 19.93 36.54 21.93 36.54C23.03 36.54 23.92 35.65 23.92 34.55C23.92 33.95 23.92 29.17 23.92 28.57C23.92 27.47 23.03 26.58 21.93 26.58C19.93 26.58 3.99 26.58 1.99 26.58C0.89 26.58 0 27.47 0 28.57C0 29.76 0 33.35 0 34.55C0 35.65 0.89 36.54 1.99 36.54Z" id="c1PUKRgLfD"></path>
        <path d="M11.96 32.89C11.23 32.89 10.63 32.29 10.63 31.56C10.63 30.82 11.23 30.23 11.96 30.23C12.69 30.23 13.29 30.82 13.29 31.56C13.29 32.29 12.69 32.89 11.96 32.89Z" id="g10I3hqSN1"></path>
        <path d="M11.96 32.89C11.23 32.89 10.63 32.29 10.63 31.56C10.63 30.82 11.23 30.23 11.96 30.23C12.69 30.23 13.29 30.82 13.29 31.56C13.29 32.29 12.69 32.89 11.96 32.89Z" id="d89XHCQTO"></path>
        <path d="M3.32 26.58C-3.32 12.79 3.32 0 11.96 0C20.6 0 27.24 12.79 20.6 26.58" id="a8H8jQsC7x"></path>
        <path d="M3.32 26.58C-3.32 12.79 3.32 0 11.96 0C20.6 0 27.24 12.79 20.6 26.58" id="f1cQ6pYoi"></path>
    </defs>
    <g>
        <g>
            <g>
                <use xlink:href="#a2eDjbk0uV" opacity="1" fill="#ffffff" fill-opacity="1"></use>
                <g>
                    <use xlink:href="#a2eDjbk0uV" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use>
                </g>
            </g>
            <g>
                <use xlink:href="#e5wOq9mEa8" opacity="1" fill="#000000" fill-opacity="0"></use>
                <g>
                    <use xlink:href="#e5wOq9mEa8" opacity="1" fill-opacity="0" stroke="#ffffff" stroke-width="0.6" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <use xlink:href="#a9PrqQ5EK" opacity="1" fill="#ffffff" fill-opacity="1"></use>
                <g>
                    <use xlink:href="#a9PrqQ5EK" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use>
                </g>
            </g>
            <g>
                <use xlink:href="#bZhtURMbo" opacity="1" fill="#000000" fill-opacity="0"></use>
                <g>
                    <use xlink:href="#bZhtURMbo" opacity="1" fill-opacity="0" stroke="#ffffff" stroke-width="0.6" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <use xlink:href="#b11tFtOzmt" opacity="1" fill="#000000" fill-opacity="0"></use>
                <g>
                    <use xlink:href="#b11tFtOzmt" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use>
                </g>
            </g>
            <g>
                <use xlink:href="#c1PUKRgLfD" opacity="1" fill="#000000" fill-opacity="0"></use>
                <g>
                    <use xlink:href="#c1PUKRgLfD" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="0.6" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <use xlink:href="#g10I3hqSN1" opacity="1" fill="#000000" fill-opacity="0"></use>
                <g>
                    <use xlink:href="#g10I3hqSN1" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use>
                </g>
            </g>
            <g>
                <use xlink:href="#d89XHCQTO" opacity="1" fill="#000000" fill-opacity="0"></use>
                <g>
                    <use xlink:href="#d89XHCQTO" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="0.6" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <use xlink:href="#a8H8jQsC7x" opacity="1" fill="#000000" fill-opacity="0"></use>
                <g>
                    <use xlink:href="#a8H8jQsC7x" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use>
                </g>
            </g>
            <g>
                <use xlink:href="#f1cQ6pYoi" opacity="1" fill="#000000" fill-opacity="0"></use>
                <g>
                    <use xlink:href="#f1cQ6pYoi" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="0.6" stroke-opacity="1"></use>
                </g>
            </g>
        </g>
    </g>
</svg>

【问题讨论】：

标签： python xml svg

【解决方案1】：

厕所图标太冗长了。您可以删除 defs 之后的所有内容，并使用 viewBox 属性将 defs 转换为 symbol。我使用的 viewBox="-1 -1 26 38" 与您使用的略有不同，因为部分中风落在了 viewBox 之外。

现在您可以根据需要多次重复使用 <use> 的符号。 use 元素可以将 x 和 y 属性放置在您需要的位置。此外，由于符号有一个 viewBox，如果您需要不同大小的图标，则可以使用宽度和高度。

如果您不需要更改大小，请不要为使用元素使用宽度和高度

<svg viewBox="0 0781 480" width="781" height="480">
<symbol id="toilet" viewBox="-1 -1 26 38">
        <path d="M1.99 36.54C3.99 36.54 19.93 36.54 21.93 36.54C23.03 36.54 23.92 35.65 23.92 34.55C23.92 33.95 23.92 29.17 23.92 28.57C23.92 27.47 23.03 26.58 21.93 26.58C19.93 26.58 3.99 26.58 1.99 26.58C0.89 26.58 0 27.47 0 28.57C0 29.76 0 33.35 0 34.55C0 35.65 0.89 36.54 1.99 36.54Z" id="a2eDjbk0uV"></path>
        <path d="M1.99 36.54C3.99 36.54 19.93 36.54 21.93 36.54C23.03 36.54 23.92 35.65 23.92 34.55C23.92 33.95 23.92 29.17 23.92 28.57C23.92 27.47 23.03 26.58 21.93 26.58C19.93 26.58 3.99 26.58 1.99 26.58C0.89 26.58 0 27.47 0 28.57C0 29.76 0 33.35 0 34.55C0 35.65 0.89 36.54 1.99 36.54Z" id="e5wOq9mEa8"></path>
        <path d="M11.96 0C20.6 0 27.24 12.79 20.6 26.58C17.14 26.58 6.78 26.58 3.32 26.58C-3.32 12.79 3.32 0 11.96 0Z" id="a9PrqQ5EK"></path>
        <path d="M11.96 0C20.6 0 27.24 12.79 20.6 26.58C17.14 26.58 6.78 26.58 3.32 26.58C-3.32 12.79 3.32 0 11.96 0Z" id="bZhtURMbo"></path>
        <path d="M1.99 36.54C3.99 36.54 19.93 36.54 21.93 36.54C23.03 36.54 23.92 35.65 23.92 34.55C23.92 33.95 23.92 29.17 23.92 28.57C23.92 27.47 23.03 26.58 21.93 26.58C19.93 26.58 3.99 26.58 1.99 26.58C0.89 26.58 0 27.47 0 28.57C0 29.76 0 33.35 0 34.55C0 35.65 0.89 36.54 1.99 36.54Z" id="b11tFtOzmt"></path>
        <path d="M1.99 36.54C3.99 36.54 19.93 36.54 21.93 36.54C23.03 36.54 23.92 35.65 23.92 34.55C23.92 33.95 23.92 29.17 23.92 28.57C23.92 27.47 23.03 26.58 21.93 26.58C19.93 26.58 3.99 26.58 1.99 26.58C0.89 26.58 0 27.47 0 28.57C0 29.76 0 33.35 0 34.55C0 35.65 0.89 36.54 1.99 36.54Z" id="c1PUKRgLfD"></path>
        <path d="M11.96 32.89C11.23 32.89 10.63 32.29 10.63 31.56C10.63 30.82 11.23 30.23 11.96 30.23C12.69 30.23 13.29 30.82 13.29 31.56C13.29 32.29 12.69 32.89 11.96 32.89Z" id="g10I3hqSN1"></path>
        <path d="M11.96 32.89C11.23 32.89 10.63 32.29 10.63 31.56C10.63 30.82 11.23 30.23 11.96 30.23C12.69 30.23 13.29 30.82 13.29 31.56C13.29 32.29 12.69 32.89 11.96 32.89Z" id="d89XHCQTO"></path>
        <path d="M3.32 26.58C-3.32 12.79 3.32 0 11.96 0C20.6 0 27.24 12.79 20.6 26.58" id="a8H8jQsC7x"></path>
        <path d="M3.32 26.58C-3.32 12.79 3.32 0 11.96 0C20.6 0 27.24 12.79 20.6 26.58" id="f1cQ6pYoi"></path>
   
</symbol>
  
<use xlink:href="#toilet" x="222" y="382" width="52" height="76"  fill="none" stroke="black"  />
</svg>

【讨论】：

感谢您的回复！我从 xlink 收到一些解析错误，可能是什么原因造成的？
您可能会发现这很有用：stackoverflow.com/questions/10820351/… 另外：您可以尝试使用 href 而不是 xlink:href
谢谢！有没有办法可以调整图标大小，如果我有如下<path d="M85 84 127 84 127 126 85 126 "/> 的路径，我可以调整图标以具有相同的尺寸？
您需要根据新路径的边界框更改符号的 viewBox 值。在这种情况下viewBox="85 84 42 42"
嗯，这似乎完全删除了对象。我的想法是改变图标的尺寸以适应黑色矩形jsfiddle.net/L5xz73j4