没有异物标签的svg图像源

Question

我正在使用 svg 图片。以下工作正常。

<img src="data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='504' height='154'><foreignObject x='0' y='0' width='100%' height='100%'><div id='bubble' xmlns='http://www.w3.org/1999/xhtml' style='animation: none 0s ease 0s 1 normal none running; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(0, 0, 255); background-blend-mode: normal; border: 2px solid rgb(0, 0, 0); border-radius: 0px; border-collapse: separate; bottom: auto; box-shadow: none; box-sizing: content-box; break-after: auto; break-before: auto; break-inside: auto; caption-side: top; clear: none; clip: auto; color: rgb(255, 255, 255); cursor: auto; direction: ltr; display: block; empty-cells: show; float: none; font-family: &quot;Times New Roman&quot;; font-kerning: auto; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; height: 150px; image-rendering: auto; isolation: auto; left: auto; letter-spacing: normal; line-height: normal; list-style: disc outside none; margin: 0px; max-height: none; max-width: none; min-height: 0px; min-width: 0px; mix-blend-mode: normal; motion: none 0px auto 0deg; object-fit: fill; object-position: 50% 50%; opacity: 1; orphans: 2; outline: rgb(255, 255, 255) none 0px; outline-offset: 0px; overflow-wrap: normal; overflow: hidden; padding: 0px; pointer-events: auto; position: static; resize: none; right: auto; speak: normal; table-layout: auto; tab-size: 8; text-align: start; text-align-last: auto; text-decoration: none; text-indent: 0px; text-rendering: auto; text-shadow: none; text-size-adjust: auto; text-overflow: clip; text-transform: none; top: auto; touch-action: auto; transition: all 0s ease 0s; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; widows: 2; width: 500px; will-change: auto; word-break: normal; word-spacing: 0px; word-wrap: normal; z-index: 0; zoom: 1; -webkit-appearance: none; backface-visibility: visible; -webkit-background-clip: border-box; -webkit-background-origin: padding-box; border-spacing: 0px; -webkit-border-image: none; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-flex-group: 1; -webkit-box-lines: single; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-clip-path: none; columns: auto auto; column-gap: normal; column-rule: 0px none rgb(255, 255, 255); column-span: none; align-content: stretch; align-items: stretch; align-self: stretch; flex: 0 1 auto; flex-flow: row nowrap; justify-content: flex-start; -webkit-font-smoothing: auto; -webkit-highlight: none; -webkit-hyphenate-character: auto; -webkit-line-break: auto; -webkit-locale: auto; -webkit-margin-collapse: collapse collapse; -webkit-mask-box-image-outset: 0px; -webkit-mask-box-image-repeat: stretch; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-source: none; -webkit-mask-box-image-width: auto; -webkit-mask: none 0% 0% / auto repeat border-box border-box; -webkit-mask-composite: source-over; order: 0; perspective: none; perspective-origin: 252px 77px; -webkit-print-color-adjust: economy; -webkit-rtl-ordering: logical; shape-outside: none; shape-image-threshold: 0; shape-margin: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.180392); -webkit-text-combine: none; -webkit-text-decorations-in-effect: none; -webkit-text-emphasis: none rgb(255, 255, 255); -webkit-text-emphasis-position: over; -webkit-text-fill-color: rgb(255, 255, 255); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke: 0px rgb(255, 255, 255); transform: none; transform-origin: 252px 77px 0px; transform-style: flat; -webkit-user-drag: auto; -webkit-user-modify: read-only; user-select: text; -webkit-writing-mode: horizontal-tb; -webkit-app-region: no-drag; buffered-rendering: auto; clip-path: none; clip-rule: nonzero; mask: none; filter: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; lighting-color: rgb(255, 255, 255); stop-color: rgb(0, 0, 0); stop-opacity: 1; color-interpolation: sRGB; color-interpolation-filters: linearRGB; color-rendering: auto; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; marker: none; mask-type: luminance; shape-rendering: auto; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; alignment-baseline: auto; baseline-shift: 0px; dominant-baseline: auto; text-anchor: start; writing-mode: horizontal-tb; vector-effect: none; paint-order: fill; d: none; cx: 0px; cy: 0px; x: 0px; y: 0px; r: 0px; rx: auto; ry: auto;'><p style='animation: none 0s ease 0s 1 normal none running; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); background-blend-mode: normal; border: 0px none rgb(255, 255, 255); border-radius: 0px; border-collapse: separate; bottom: auto; box-shadow: none; box-sizing: content-box; break-after: auto; break-before: auto; break-inside: auto; caption-side: top; clear: none; clip: auto; color: rgb(255, 255, 255); cursor: auto; direction: ltr; display: block; empty-cells: show; float: none; font-family: &quot;Times New Roman&quot;; font-kerning: auto; font-size: 30px; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; height: 34px; image-rendering: auto; isolation: auto; left: auto; letter-spacing: normal; line-height: normal; list-style: disc outside none; margin: 30px 0px; max-height: none; max-width: none; min-height: 0px; min-width: 0px; mix-blend-mode: normal; motion: none 0px auto 0deg; object-fit: fill; object-position: 50% 50%; opacity: 1; orphans: 2; outline: rgb(255, 255, 255) none 0px; outline-offset: 0px; overflow-wrap: normal; overflow: visible; padding: 0px; pointer-events: auto; position: static; resize: none; right: auto; speak: normal; table-layout: auto; tab-size: 8; text-align: start; text-align-last: auto; text-decoration: none; text-indent: 0px; text-rendering: auto; text-shadow: none; text-size-adjust: auto; text-overflow: clip; text-transform: none; top: auto; touch-action: auto; transition: all 0s ease 0s; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; widows: 2; width: 500px; will-change: auto; word-break: normal; word-spacing: 0px; word-wrap: normal; z-index: auto; zoom: 1; -webkit-appearance: none; backface-visibility: visible; -webkit-background-clip: border-box; -webkit-background-origin: padding-box; border-spacing: 0px; -webkit-border-image: none; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-flex-group: 1; -webkit-box-lines: single; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-clip-path: none; columns: auto auto; column-gap: normal; column-rule: 0px none rgb(255, 255, 255); column-span: none; align-content: stretch; align-items: stretch; align-self: stretch; flex: 0 1 auto; flex-flow: row nowrap; justify-content: flex-start; -webkit-font-smoothing: auto; -webkit-highlight: none; -webkit-hyphenate-character: auto; -webkit-line-break: auto; -webkit-locale: auto; -webkit-margin-collapse: collapse collapse; -webkit-mask-box-image-outset: 0px; -webkit-mask-box-image-repeat: stretch; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-source: none; -webkit-mask-box-image-width: auto; -webkit-mask: none 0% 0% / auto repeat border-box border-box; -webkit-mask-composite: source-over; order: 0; perspective: none; perspective-origin: 250px 17px; -webkit-print-color-adjust: economy; -webkit-rtl-ordering: logical; shape-outside: none; shape-image-threshold: 0; shape-margin: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.180392); -webkit-text-combine: none; -webkit-text-decorations-in-effect: none; -webkit-text-emphasis: none rgb(255, 255, 255); -webkit-text-emphasis-position: over; -webkit-text-fill-color: rgb(255, 255, 255); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke: 0px rgb(255, 255, 255); transform: none; transform-origin: 250px 17px 0px; transform-style: flat; -webkit-user-drag: auto; -webkit-user-modify: read-only; user-select: text; -webkit-writing-mode: horizontal-tb; -webkit-app-region: no-drag; buffered-rendering: auto; clip-path: none; clip-rule: nonzero; mask: none; filter: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; lighting-color: rgb(255, 255, 255); stop-color: rgb(0, 0, 0); stop-opacity: 1; color-interpolation: sRGB; color-interpolation-filters: linearRGB; color-rendering: auto; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; marker: none; mask-type: luminance; shape-rendering: auto; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; alignment-baseline: auto; baseline-shift: 0px; dominant-baseline: auto; text-anchor: start; writing-mode: horizontal-tb; vector-effect: none; paint-order: fill; d: none; cx: 0px; cy: 0px; x: 0px; y: 0px; r: 0px; rx: auto; ry: auto;'>Please try me on an apple device.</p><style></style></div></foreignObject></svg>">

http://jsfiddle.net/8VY52/970/

我想从中删除 <foreignObject> 标签，但如果我这样做，图像将不会显示。正确的做法是什么？

Answer 1

这非常接近。

<img src="data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='504' height='154'><rect width='100%' height='100%' fill='blue' stroke='black' stroke-width='4'/><text y='60' fill='white' font-size='30px' font-family='Times New Roman' font-weight='bold'>Please try me on an apple device.</text></svg>"/>