Question

我有一个svg图像文件，当我从外部页面调用它时，它不显示完整图像。它只显示大约一半的图像。有谁知道为什么？

INDEX.HTML

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title></title>


<style type="text/css">

</style>

</head>

<body>

<svg class="icon"><use xlink:href="image.svg#Layer_1" /></svg>


<script>

</script>

</body>

</html>

IMAGE.SVG

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="433px" height="433px" viewBox="0 0 433 433" enable-background="new 0  0 433 433" xml:space="preserve">
<circle fill="#00AEEF" stroke="#000000" stroke-width="7" stroke- miterlimit="10" cx="216.5" cy="216.5" r="213"/>
</svg>

Answer 1

如果您没有在根svg元素上指定宽度和高度，它将默认为“100％”的任意尺寸，因此请尝试在INDEX.HTML中明确设置尺寸，如下所示：

<svg class="icon" width="433px" height="433px"><use xlink:href="image.svg#Layer_1" /></svg>

SVG图像文件未显示完整图像

1 个答案: