Question

我在这里有一些SVG在div中显示正常，但不是在一个img里面有src =“data：image / svg + xml; utf8等等.....

我已经将svg替换为更简单的svg并且很好，所以我知道我的实际svg代码有些奇怪。

ON DELETE CASCADE

Answer 1

您需要对文件进行URI编码，并且还需要为其提供正确的命名空间，因为您不再将其嵌入到html文件中。 E.g。

<img src='data:image/svg+xml;charset=utf-8,<svg width="500" height="420" xmlns="http://www.w3.org/2000/svg">
<style id="mystyle" type="text/css">.node { cursor: pointer;    }   .node circle { fill: %23fff; stroke: steelblue; stroke-width: 1.5px;  }   .node text { font: 10px sans-serif;     }   .link { fill: none; stroke: %23000; stroke-width: 1px;    }       .erd-bc { fill: none; stroke: %23aaa; stroke-width: 2px;  }       marker {    fill: none;     stroke: %23000;   stroke-width: 1px;  }       </style><g transform="translate(120,20)">
    <defs>
        <marker viewBox="0 0 10 10" id="card-many-end" refX="0" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
            <path d="M 10 0 L 0 5 L 10 10 M 0 5 L 10 5"/>
        </marker>
    </defs>
    <defs>
        <marker viewBox="0 0 10 10" id="card-one-end" refX="0" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
            <path d="M 0 5 L 10 5"/>
        </marker>
    </defs>
    <defs>
        <marker viewBox="0 0 10 10" id="card-many-start" refX="10" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
            <path d="M 0 0 L 10 5 L 0 10 M 10 5 L 0 5"/>
        </marker>
    </defs>
    <defs>
        <marker viewBox="0 0 10 10" id="card-one-start" refX="10" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
            <path d="M 10 5 L 0 5"/>
        </marker>
    </defs>
    <path class="link" marker-end="" marker-start="url(%23card-many-start)" d="M60,275C60,300 60,300 60,325" style="opacity: 1;"/>
    <path class="link" marker-end="url(%23card-many-end)" marker-start="" d="M130,155C130,180 60,180 60,205" style="opacity: 1;"/>
    <path class="link" marker-end="url(%23card-many-end)" marker-start="" d="M130,155C130,180 200,180 200,205" style="opacity: 1;"/>
    <path class="link" marker-end="url(%23card-many-end)" marker-start="" d="M130,45C130,70 130,70 130,95" style="opacity: 1;"/>
    <g opacity="1" class="node" transform="translate(200,240)">
        <g class="node-bc" transform="translate(-60,-25)">
            <rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
            <text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Operation Bindings</text>
            <text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB1</text>
        </g>
        <text dy="-5em" class="fkcol" text-anchor="middle">PORT_ID</text>
    </g><g opacity="1" class="node" transform="translate(60,350)">
        <g class="node-bc" transform="translate(-60,-25)">
            <rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
            <text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Operation</text>
            <text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB2</text>
        </g>
        <text dy="-5em" class="fkcol" text-anchor="middle"/>
    </g><g opacity="1" class="node" transform="translate(60,240)">
        <g class="node-bc" transform="translate(-60,-25)">
            <rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
            <text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Intersection</text>
            <text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB3</text>
        </g>
        <text dy="-5em" class="fkcol" text-anchor="middle">PORT_ID</text>
    </g><g opacity="1" class="node" transform="translate(130,130)">
        <g class="node-bc" transform="translate(-60,-25)">
            <rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
            <text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Port</text>
            <text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB4</text>
        </g>
        <text dy="-5em" class="fkcol" text-anchor="middle">WEB_SERVICE_ID</text>
    </g><g opacity="1" class="node" transform="translate(130,20)">
        <g class="node-bc" transform="translate(-60,-25)">
            <rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
            <text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Web Service</text>
            <text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB5</text>
        </g>
        <text dy="-5em" class="fkcol" text-anchor="middle"/>
    </g>
</g>
</svg>'></img>

在<img/>标记内使用时，svg代码根本不显示

1 个答案: