我正在尝试使用从传单到单个png的多个嵌入图像切片来渲染SVG文件。
html2canvas裁剪多边形叠加
leaflet-image插件无法获取由我的角度应用
构建的html信息卡叠加层 使用toSVG方法的domtoimage 非常接近我想要的，但是从地图框中丢失了瓷砖。我试图对svg无法正确渲染到png的原因进行反向工程，将其简化为最基本的内容。
使用裸骨html
<html>
<header></header>
<body>
<img src="indexSO.svg"></img>
</body>
</html>
indexSO.svg的内容为
<svg xmlns="http://www.w3.org/2000/svg" width="1212" height="828"><foreignObject x="0" y="0" width="100%" height="100%">
<div ng-include="" src="'map/map.html'" ng-controller="MapController as Map" id="mapWrapper" style="height: 828px; place-content: normal; place-items: normal; place-self: auto; animation: 0s ease 0s normal none 1 running none; backface-visibility: visible; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; background-blend-mode: normal; border: 0px none rgba(0, 0, 0, 0.87); border-radius: 0px; border-collapse: separate; border-spacing: 0px; bottom: 0px; box-decoration-break: slice; box-shadow: none; box-sizing: border-box; caption-side: top; caret-color: rgba(0, 0, 0, 0.87); clear: none; clip: auto; color: rgba(0, 0, 0, 0.87); color-adjust: economy; columns: auto auto; column-fill: balance; column-gap: 14px; column-rule: 0px none rgba(0, 0, 0, 0.87); content: none; counter-increment: none; counter-reset: none; cursor: auto; direction: ltr; display: block; empty-cells: show; flex: 0 1 auto; flex-flow: row nowrap; float: none; font: 400 14px/20px "Lato","Helvetica Neue",Arial,Helvetica,sans-serif; font-synthesis: weight style; grid: none / none; grid-area: auto / auto / auto / auto; hyphens: manual; image-orientation: 0deg; ime-mode: auto; isolation: auto; left: 0px; letter-spacing: normal; list-style: outside none disc; margin: 0px; max-height: none; max-width: none; min-height: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; opacity: 1; order: 0; outline: 0px none rgba(0, 0, 0, 0.87); outline-offset: 0px; overflow: auto; overflow-wrap: normal; padding: 0px; page-break-after: auto; page-break-before: auto; page-break-inside: auto; perspective: none; perspective-origin: 606px 414px; pointer-events: auto; position: relative; quotes: "“" "”" "‘" "’"; resize: none; right: 0px; ruby-align: space-around; ruby-position: over; scroll-behavior: auto; scroll-snap-coordinate: none; scroll-snap-destination: 0px 0px; scroll-snap-points-x: none; scroll-snap-points-y: none; scroll-snap-type: none; table-layout: auto; text-align: start; text-align-last: auto; text-combine-upright: none; text-decoration: none rgba(0, 0, 0, 0.87); text-emphasis: rgba(0, 0, 0, 0.87); text-emphasis-position: over right; text-indent: 0px; text-justify: auto; text-orientation: mixed; text-overflow: clip; text-shadow: none; text-transform: none; top: 0px; touch-action: auto; transform: none; transform-box: border-box; transform-origin: 606px 414px 0px; transform-style: flat; transition: all 0s ease 0s; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; width: 1212px; will-change: auto; word-break: normal; word-spacing: 0px; writing-mode: horizontal-tb; z-index: auto; -moz-appearance: none; -moz-binding: none; -moz-box-align: stretch; -moz-box-direction: normal; -moz-box-flex: 0; -moz-box-ordinal-group: 1; -moz-box-orient: horizontal; -moz-box-pack: start; -moz-context-properties: none; -moz-float-edge: content-box; -moz-force-broken-image-icon: 0; -moz-image-region: auto; -moz-orient: inline; -moz-outline-radius: 0px; -moz-stack-sizing: stretch-to-fit; -moz-tab-size: 8; -moz-text-size-adjust: auto; -moz-user-focus: none; -moz-user-input: auto; -moz-user-modify: read-only; -moz-user-select: auto; -moz-window-dragging: default; -webkit-text-fill-color: rgba(0, 0, 0, 0.87); -webkit-text-stroke: 0px rgba(0, 0, 0, 0.87); clip-path: none; clip-rule: nonzero; color-interpolation: srgb; color-interpolation-filters: linearrgb; dominant-baseline: auto; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; filter: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; image-rendering: auto; lighting-color: rgb(255, 255, 255); marker: none; mask: none repeat 0% 0% add match-source; mask-type: luminance; paint-order: normal; shape-rendering: auto; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; text-anchor: start; text-rendering: auto; vector-effect: none;" class="ng-scope _md" xmlns="http://www.w3.org/1999/xhtml">
<div class="leaflet-pane leaflet-map-pane" style="transform: matrix(1, 0, 0, 1, 901, 376); place-content: normal; place-items: normal; place-self: auto; animation: 0s ease 0s normal none 1 running none; backface-visibility: visible; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; background-blend-mode: normal; border: 0px none rgba(0, 0, 0, 0.87); border-radius: 0px; border-collapse: separate; border-spacing: 0px; bottom: 828px; box-decoration-break: slice; box-shadow: none; box-sizing: border-box; caption-side: top; caret-color: rgba(0, 0, 0, 0.87); clear: none; clip: auto; color: rgba(0, 0, 0, 0.87); color-adjust: economy; columns: auto auto; column-fill: balance; column-gap: 12px; column-rule: 0px none rgba(0, 0, 0, 0.87); content: none; counter-increment: none; counter-reset: none; cursor: grab; direction: ltr; display: block; empty-cells: show; flex: 0 1 auto; flex-flow: row nowrap; float: none; font: 400 12px/18px "Helvetica Neue",Arial,Helvetica,sans-serif; font-synthesis: weight style; grid: none / none; grid-area: auto / auto / auto / auto; height: 0px; hyphens: manual; image-orientation: 0deg; ime-mode: auto; isolation: auto; left: 0px; letter-spacing: normal; list-style: outside none disc; margin: 0px; max-height: none; max-width: none; min-height: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; opacity: 1; order: 0; outline: 0px none rgba(0, 0, 0, 0.87); outline-offset: 0px; overflow: visible; overflow-wrap: normal; padding: 0px; page-break-after: auto; page-break-before: auto; page-break-inside: auto; perspective: none; perspective-origin: 0px 0px; pointer-events: auto; position: absolute; quotes: "“" "”" "‘" "’"; resize: none; right: 1212px; ruby-align: space-around; ruby-position: over; scroll-behavior: auto; scroll-snap-coordinate: none; scroll-snap-destination: 0px 0px; scroll-snap-points-x: none; scroll-snap-points-y: none; scroll-snap-type: none; table-layout: auto; text-align: start; text-align-last: auto; text-combine-upright: none; text-decoration: none rgba(0, 0, 0, 0.87); text-emphasis: rgba(0, 0, 0, 0.87); text-emphasis-position: over right; text-indent: 0px; text-justify: auto; text-orientation: mixed; text-overflow: clip; text-shadow: none; text-transform: none; top: 0px; touch-action: auto; transform-box: border-box; transform-origin: 0px 0px 0px; transform-style: flat; transition: all 0s ease 0s; unicode-bidi: isolate; vertical-align: baseline; visibility: visible; white-space: normal; width: 0px; will-change: auto; word-break: normal; word-spacing: 0px; writing-mode: horizontal-tb; z-index: 400; -moz-appearance: none; -moz-binding: none; -moz-box-align: stretch; -moz-box-direction: normal; -moz-box-flex: 0; -moz-box-ordinal-group: 1; -moz-box-orient: horizontal; -moz-box-pack: start; -moz-context-properties: none; -moz-float-edge: content-box; -moz-force-broken-image-icon: 0; -moz-image-region: auto; -moz-orient: inline; -moz-outline-radius: 0px; -moz-stack-sizing: stretch-to-fit; -moz-tab-size: 8; -moz-text-size-adjust: auto; -moz-user-focus: none; -moz-user-input: auto; -moz-user-modify: read-only; -moz-user-select: auto; -moz-window-dragging: default; -webkit-text-fill-color: rgba(0, 0, 0, 0.87); -webkit-text-stroke: 0px rgba(0, 0, 0, 0.87); clip-path: none; clip-rule: nonzero; color-interpolation: srgb; color-interpolation-filters: linearrgb; dominant-baseline: auto; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; filter: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; image-rendering: auto; lighting-color: rgb(255, 255, 255); marker: none; mask: none repeat 0% 0% add match-source; mask-type: luminance; paint-order: normal; shape-rendering: auto; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; text-anchor: start; text-rendering: auto; vector-effect: none;">
<div class="leaflet-pane leaflet-tile-pane" style="place-content: normal; place-items: normal; place-self: auto; animation: 0s ease 0s normal none 1 running none; backface-visibility: visible; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; background-blend-mode: normal; border: 0px none rgba(0, 0, 0, 0.87); border-radius: 0px; border-collapse: separate; border-spacing: 0px; bottom: 0px; box-decoration-break: slice; box-shadow: none; box-sizing: border-box; caption-side: top; caret-color: rgba(0, 0, 0, 0.87); clear: none; clip: auto; color: rgba(0, 0, 0, 0.87); color-adjust: economy; columns: auto auto; column-fill: balance; column-gap: 12px; column-rule: 0px none rgba(0, 0, 0, 0.87); content: none; counter-increment: none; counter-reset: none; cursor: grab; direction: ltr; display: block; empty-cells: show; flex: 0 1 auto; flex-flow: row nowrap; float: none; font: 400 12px/18px "Helvetica Neue",Arial,Helvetica,sans-serif; font-synthesis: weight style; grid: none / none; grid-area: auto / auto / auto / auto; height: 0px; hyphens: manual; image-orientation: 0deg; ime-mode: auto; isolation: auto; left: 0px; letter-spacing: normal; list-style: outside none disc; margin: 0px; max-height: none; max-width: none; min-height: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; opacity: 1; order: 0; outline: 0px none rgba(0, 0, 0, 0.87); outline-offset: 0px; overflow: visible; overflow-wrap: normal; padding: 0px; page-break-after: auto; page-break-before: auto; page-break-inside: auto; perspective: none; perspective-origin: 0px 0px; pointer-events: auto; position: absolute; quotes: "“" "”" "‘" "’"; resize: none; right: 0px; ruby-align: space-around; ruby-position: over; scroll-behavior: auto; scroll-snap-coordinate: none; scroll-snap-destination: 0px 0px; scroll-snap-points-x: none; scroll-snap-points-y: none; scroll-snap-type: none; table-layout: auto; text-align: start; text-align-last: auto; text-combine-upright: none; text-decoration: none rgba(0, 0, 0, 0.87); text-emphasis: rgba(0, 0, 0, 0.87); text-emphasis-position: over right; text-indent: 0px; text-justify: auto; text-orientation: mixed; text-overflow: clip; text-shadow: none; text-transform: none; top: 0px; touch-action: auto; transform: none; transform-box: border-box; transform-origin: 0px 0px 0px; transform-style: flat; transition: all 0s ease 0s; unicode-bidi: isolate; vertical-align: baseline; visibility: visible; white-space: normal; width: 0px; will-change: auto; word-break: normal; word-spacing: 0px; writing-mode: horizontal-tb; z-index: 200; -moz-appearance: none; -moz-binding: none; -moz-box-align: stretch; -moz-box-direction: normal; -moz-box-flex: 0; -moz-box-ordinal-group: 1; -moz-box-orient: horizontal; -moz-box-pack: start; -moz-context-properties: none; -moz-float-edge: content-box; -moz-force-broken-image-icon: 0; -moz-image-region: auto; -moz-orient: inline; -moz-outline-radius: 0px; -moz-stack-sizing: stretch-to-fit; -moz-tab-size: 8; -moz-text-size-adjust: auto; -moz-user-focus: none; -moz-user-input: auto; -moz-user-modify: read-only; -moz-user-select: auto; -moz-window-dragging: default; -webkit-text-fill-color: rgba(0, 0, 0, 0.87); -webkit-text-stroke: 0px rgba(0, 0, 0, 0.87); clip-path: none; clip-rule: nonzero; color-interpolation: srgb; color-interpolation-filters: linearrgb; dominant-baseline: auto; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; filter: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; image-rendering: auto; lighting-color: rgb(255, 255, 255); marker: none; mask: none repeat 0% 0% add match-source; mask-type: luminance; paint-order: normal; shape-rendering: auto; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; text-anchor: start; text-rendering: auto; vector-effect: none;">
<div class="leaflet-layer " style="z-index: 5000; opacity: 1; place-content: normal; place-items: normal; place-self: auto; animation: 0s ease 0s normal none 1 running none; backface-visibility: visible; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; background-blend-mode: normal; border: 0px none rgba(0, 0, 0, 0.87); border-radius: 0px; border-collapse: separate; border-spacing: 0px; bottom: 0px; box-decoration-break: slice; box-shadow: none; box-sizing: border-box; caption-side: top; caret-color: rgba(0, 0, 0, 0.87); clear: none; clip: auto; color: rgba(0, 0, 0, 0.87); color-adjust: economy; columns: auto auto; column-fill: balance; column-gap: 12px; column-rule: 0px none rgba(0, 0, 0, 0.87); content: none; counter-increment: none; counter-reset: none; cursor: grab; direction: ltr; display: block; empty-cells: show; flex: 0 1 auto; flex-flow: row nowrap; float: none; font: 400 12px/18px "Helvetica Neue",Arial,Helvetica,sans-serif; font-synthesis: weight style; grid: none / none; grid-area: auto / auto / auto / auto; height: 0px; hyphens: manual; image-orientation: 0deg; ime-mode: auto; isolation: auto; left: 0px; letter-spacing: normal; list-style: outside none disc; margin: 0px; max-height: none; max-width: none; min-height: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; order: 0; outline: 0px none rgba(0, 0, 0, 0.87); outline-offset: 0px; overflow: visible; overflow-wrap: normal; padding: 0px; page-break-after: auto; page-break-before: auto; page-break-inside: auto; perspective: none; perspective-origin: 0px 0px; pointer-events: auto; position: absolute; quotes: "“" "”" "‘" "’"; resize: none; right: 0px; ruby-align: space-around; ruby-position: over; scroll-behavior: auto; scroll-snap-coordinate: none; scroll-snap-destination: 0px 0px; scroll-snap-points-x: none; scroll-snap-points-y: none; scroll-snap-type: none; table-layout: auto; text-align: start; text-align-last: auto; text-combine-upright: none; text-decoration: none rgba(0, 0, 0, 0.87); text-emphasis: rgba(0, 0, 0, 0.87); text-emphasis-position: over right; text-indent: 0px; text-justify: auto; text-orientation: mixed; text-overflow: clip; text-shadow: none; text-transform: none; top: 0px; touch-action: auto; transform: none; transform-box: border-box; transform-origin: 0px 0px 0px; transform-style: flat; transition: all 0s ease 0s; unicode-bidi: isolate; vertical-align: baseline; visibility: visible; white-space: normal; width: 0px; will-change: auto; word-break: normal; word-spacing: 0px; writing-mode: horizontal-tb; -moz-appearance: none; -moz-binding: none; -moz-box-align: stretch; -moz-box-direction: normal; -moz-box-flex: 0; -moz-box-ordinal-group: 1; -moz-box-orient: horizontal; -moz-box-pack: start; -moz-context-properties: none; -moz-float-edge: content-box; -moz-force-broken-image-icon: 0; -moz-image-region: auto; -moz-orient: inline; -moz-outline-radius: 0px; -moz-stack-sizing: stretch-to-fit; -moz-tab-size: 8; -moz-text-size-adjust: auto; -moz-user-focus: none; -moz-user-input: auto; -moz-user-modify: read-only; -moz-user-select: auto; -moz-window-dragging: default; -webkit-text-fill-color: rgba(0, 0, 0, 0.87); -webkit-text-stroke: 0px rgba(0, 0, 0, 0.87); clip-path: none; clip-rule: nonzero; color-interpolation: srgb; color-interpolation-filters: linearrgb; dominant-baseline: auto; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; filter: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; image-rendering: auto; lighting-color: rgb(255, 255, 255); marker: none; mask: none repeat 0% 0% add match-source; mask-type: luminance; paint-order: normal; shape-rendering: auto; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; text-anchor: start; text-rendering: auto; vector-effect: none;">
<div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 5000; transform: matrix(4, 0, 0, 4, 720, -342); place-content: normal; place-items: normal; place-self: auto; animation: 0s ease 0s normal none 1 running none; backface-visibility: visible; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; background-blend-mode: normal; border: 0px none rgba(0, 0, 0, 0.87); border-radius: 0px; border-collapse: separate; border-spacing: 0px; bottom: 0px; box-decoration-break: slice; box-shadow: none; box-sizing: border-box; caption-side: top; caret-color: rgba(0, 0, 0, 0.87); clear: none; clip: auto; color: rgba(0, 0, 0, 0.87); color-adjust: economy; columns: auto auto; column-fill: balance; column-gap: 12px; column-rule: 0px none rgba(0, 0, 0, 0.87); content: none; counter-increment: none; counter-reset: none; cursor: grab; direction: ltr; display: block; empty-cells: show; flex: 0 1 auto; flex-flow: row nowrap; float: none; font: 400 12px/18px "Helvetica Neue",Arial,Helvetica,sans-serif; font-synthesis: weight style; grid: none / none; grid-area: auto / auto / auto / auto; height: 0px; hyphens: manual; image-orientation: 0deg; ime-mode: auto; isolation: auto; left: 0px; letter-spacing: normal; list-style: outside none disc; margin: 0px; max-height: none; max-width: none; min-height: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; opacity: 1; order: 0; outline: 0px none rgba(0, 0, 0, 0.87); outline-offset: 0px; overflow: visible; overflow-wrap: normal; padding: 0px; page-break-after: auto; page-break-before: auto; page-break-inside: auto; perspective: none; perspective-origin: 0px 0px; pointer-events: none; position: absolute; quotes: "“" "”" "‘" "’"; resize: none; right: 0px; ruby-align: space-around; ruby-position: over; scroll-behavior: auto; scroll-snap-coordinate: none; scroll-snap-destination: 0px 0px; scroll-snap-points-x: none; scroll-snap-points-y: none; scroll-snap-type: none; table-layout: auto; text-align: start; text-align-last: auto; text-combine-upright: none; text-decoration: none rgba(0, 0, 0, 0.87); text-emphasis: rgba(0, 0, 0, 0.87); text-emphasis-position: over right; text-indent: 0px; text-justify: auto; text-orientation: mixed; text-overflow: clip; text-shadow: none; text-transform: none; top: 0px; touch-action: auto; transform-box: border-box; transform-origin: 0px 0px 0px; transform-style: flat; transition: all 0s ease 0s; unicode-bidi: isolate; vertical-align: baseline; visibility: visible; white-space: normal; width: 0px; will-change: auto; word-break: normal; word-spacing: 0px; writing-mode: horizontal-tb; -moz-appearance: none; -moz-binding: none; -moz-box-align: stretch; -moz-box-direction: normal; -moz-box-flex: 0; -moz-box-ordinal-group: 1; -moz-box-orient: horizontal; -moz-box-pack: start; -moz-context-properties: none; -moz-float-edge: content-box; -moz-force-broken-image-icon: 0; -moz-image-region: auto; -moz-orient: inline; -moz-outline-radius: 0px; -moz-stack-sizing: stretch-to-fit; -moz-tab-size: 8; -moz-text-size-adjust: auto; -moz-user-focus: none; -moz-user-input: auto; -moz-user-modify: read-only; -moz-user-select: auto; -moz-window-dragging: default; -webkit-text-fill-color: rgba(0, 0, 0, 0.87); -webkit-text-stroke: 0px rgba(0, 0, 0, 0.87); clip-path: none; clip-rule: nonzero; color-interpolation: srgb; color-interpolation-filters: linearrgb; dominant-baseline: auto; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; filter: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; image-rendering: auto; lighting-color: rgb(255, 255, 255); marker: none; mask: none repeat 0% 0% add match-source; mask-type: luminance; paint-order: normal; shape-rendering: auto; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; text-anchor: start; text-rendering: auto; vector-effect: none;">
</div>
<div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 5000; transform: matrix(1, 0, 0, 1, 0, 0); place-content: normal; place-items: normal; place-self: auto; animation: 0s ease 0s normal none 1 running none; backface-visibility: visible; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; background-blend-mode: normal; border: 0px none rgba(0, 0, 0, 0.87); border-radius: 0px; border-collapse: separate; border-spacing: 0px; bottom: 0px; box-decoration-break: slice; box-shadow: none; box-sizing: border-box; caption-side: top; caret-color: rgba(0, 0, 0, 0.87); clear: none; clip: auto; color: rgba(0, 0, 0, 0.87); color-adjust: economy; columns: auto auto; column-fill: balance; column-gap: 12px; column-rule: 0px none rgba(0, 0, 0, 0.87); content: none; counter-increment: none; counter-reset: none; cursor: grab; direction: ltr; display: block; empty-cells: show; flex: 0 1 auto; flex-flow: row nowrap; float: none; font: 400 12px/18px "Helvetica Neue",Arial,Helvetica,sans-serif; font-synthesis: weight style; grid: none / none; grid-area: auto / auto / auto / auto; height: 0px; hyphens: manual; image-orientation: 0deg; ime-mode: auto; isolation: auto; left: 0px; letter-spacing: normal; list-style: outside none disc; margin: 0px; max-height: none; max-width: none; min-height: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; opacity: 1; order: 0; outline: 0px none rgba(0, 0, 0, 0.87); outline-offset: 0px; overflow: visible; overflow-wrap: normal; padding: 0px; page-break-after: auto; page-break-before: auto; page-break-inside: auto; perspective: none; perspective-origin: 0px 0px; pointer-events: none; position: absolute; quotes: "“" "”" "‘" "’"; resize: none; right: 0px; ruby-align: space-around; ruby-position: over; scroll-behavior: auto; scroll-snap-coordinate: none; scroll-snap-destination: 0px 0px; scroll-snap-points-x: none; scroll-snap-points-y: none; scroll-snap-type: none; table-layout: auto; text-align: start; text-align-last: auto; text-combine-upright: none; text-decoration: none rgba(0, 0, 0, 0.87); text-emphasis: rgba(0, 0, 0, 0.87); text-emphasis-position: over right; text-indent: 0px; text-justify: auto; text-orientation: mixed; text-overflow: clip; text-shadow: none; text-transform: none; top: 0px; touch-action: auto; transform-box: border-box; transform-origin: 0px 0px 0px; transform-style: flat; transition: all 0s ease 0s; unicode-bidi: isolate; vertical-align: baseline; visibility: visible; white-space: normal; width: 0px; will-change: auto; word-break: normal; word-spacing: 0px; writing-mode: horizontal-tb; -moz-appearance: none; -moz-binding: none; -moz-box-align: stretch; -moz-box-direction: normal; -moz-box-flex: 0; -moz-box-ordinal-group: 1; -moz-box-orient: horizontal; -moz-box-pack: start; -moz-context-properties: none; -moz-float-edge: content-box; -moz-force-broken-image-icon: 0; -moz-image-region: auto; -moz-orient: inline; -moz-outline-radius: 0px; -moz-stack-sizing: stretch-to-fit; -moz-tab-size: 8; -moz-text-size-adjust: auto; -moz-user-focus: none; -moz-user-input: auto; -moz-user-modify: read-only; -moz-user-select: auto; -moz-window-dragging: default; -webkit-text-fill-color: rgba(0, 0, 0, 0.87); -webkit-text-stroke: 0px rgba(0, 0, 0, 0.87); clip-path: none; clip-rule: nonzero; color-interpolation: srgb; color-interpolation-filters: linearrgb; dominant-baseline: auto; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; filter: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; image-rendering: auto; lighting-color: rgb(255, 255, 255); marker: none; mask: none repeat 0% 0% add match-source; mask-type: luminance; paint-order: normal; shape-rendering: auto; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; text-anchor: start; text-rendering: auto; vector-effect: none;">
<img alt="" src="data:;base64,... removed for brevity ..." class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: matrix(1, 0, 0, 1, -560, 86); opacity: 1; place-content: normal; place-items: normal; place-self: auto; animation: 0s ease 0s normal none 1 running none; backface-visibility: visible; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; background-blend-mode: normal; border: 0px none rgba(0, 0, 0, 0.87); border-radius: 0px; border-collapse: separate; border-spacing: 0px; bottom: -256px; box-decoration-break: slice; box-shadow: none; box-sizing: border-box; caption-side: top; caret-color: rgba(0, 0, 0, 0.87); clear: none; clip: auto; color: rgba(0, 0, 0, 0.87); color-adjust: economy; columns: auto auto; column-fill: balance; column-gap: 12px; column-rule: 0px none rgba(0, 0, 0, 0.87); content: none; counter-increment: none; counter-reset: none; cursor: grab; direction: ltr; display: block; empty-cells: show; flex: 0 1 auto; flex-flow: row nowrap; float: none; font: 400 12px/18px "Helvetica Neue",Arial,Helvetica,sans-serif; font-synthesis: weight style; grid: none / none; grid-area: auto / auto / auto / auto; hyphens: manual; image-orientation: 0deg; ime-mode: auto; isolation: auto; left: 0px; letter-spacing: normal; list-style: outside none disc; margin: 0px; max-height: none; max-width: none; min-height: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; order: 0; outline: 0px none rgba(0, 0, 0, 0.87); outline-offset: 0px; overflow: visible; overflow-wrap: normal; padding: 0px; page-break-after: auto; page-break-before: auto; page-break-inside: auto; perspective: none; perspective-origin: 128px 128px; pointer-events: none; position: absolute; quotes: "“" "”" "‘" "’"; resize: none; right: -256px; ruby-align: space-around; ruby-position: over; scroll-behavior: auto; scroll-snap-coordinate: none; scroll-snap-destination: 0px 0px; scroll-snap-points-x: none; scroll-snap-points-y: none; scroll-snap-type: none; table-layout: auto; text-align: start; text-align-last: auto; text-combine-upright: none; text-decoration: none rgba(0, 0, 0, 0.87); text-emphasis: rgba(0, 0, 0, 0.87); text-emphasis-position: over right; text-indent: 0px; text-justify: auto; text-orientation: mixed; text-overflow: clip; text-shadow: none; text-transform: none; top: 0px; touch-action: auto; transform-box: border-box; transform-origin: 128px 128px 0px; transform-style: flat; transition: all 0s ease 0s; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; will-change: opacity; word-break: normal; word-spacing: 0px; writing-mode: horizontal-tb; z-index: 10000; -moz-appearance: none; -moz-binding: none; -moz-box-align: stretch; -moz-box-direction: normal; -moz-box-flex: 0; -moz-box-ordinal-group: 1; -moz-box-orient: horizontal; -moz-box-pack: start; -moz-context-properties: none; -moz-float-edge: content-box; -moz-force-broken-image-icon: 0; -moz-image-region: auto; -moz-orient: inline; -moz-outline-radius: 0px; -moz-stack-sizing: stretch-to-fit; -moz-tab-size: 8; -moz-text-size-adjust: auto; -moz-user-focus: none; -moz-user-input: auto; -moz-user-modify: read-only; -moz-user-select: none; -moz-window-dragging: default; -webkit-text-fill-color: rgba(0, 0, 0, 0.87); -webkit-text-stroke: 0px rgba(0, 0, 0, 0.87); clip-path: none; clip-rule: nonzero; color-interpolation: srgb; color-interpolation-filters: linearrgb; dominant-baseline: auto; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; filter: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; image-rendering: auto; lighting-color: rgb(255, 255, 255); marker: none; mask: none repeat 0% 0% add match-source; mask-type: luminance; paint-order: normal; shape-rendering: auto; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; text-anchor: start; text-rendering: auto; vector-effect: none;" />
</div>
</div></div>
</div>
<style>
</style></div></foreignObject></svg>
如果您自己打开svg，图像将呈现，但是当裸骨HTML中的img标记引用时，图像将呈现。其他HTML元素渲染得很好，但我已经剥离了所有这些，看看是否存在透明度或z-index问题。