应该如何

Question

这是我的.svg文件代码。此应用程序以.svg格式创建启动画面。我必须将其转换为HTML5。它正在使用的标签我不知道HTML5中的等效标签。

<?xml version="1.0" encoding="UTF-8"?>
   <image x="0" y="1" width="1920" height="1080" xlink:href=asd.jpg" />
    <text x="500" y="160" font-family="arial" font-size="72" fill="#99CCFF">test</text>
    <text id="IPText" x="600" y="850" font-family="arial" font-size="45" fill="#f5f5f5"></text>
    <text x="550" y="890" font-family="arial" font-size="28" fill="#f5f5f5">test</text>
    <text x="550" y="910" font-family="arial" font-size="28" fill="#f5f5f5"> (e.g. test)</text>


    <g id="urlBar" transform="translate(146, 10)">

        <text id="urlBarText" x="352" y="970" font-family="arial" font-size="20" fill="#AAAAAA" editable="simple" focusable="true">http://</text>
    </g>
</svg>

Answer 1

您可以直接将svg图片放入html，只需确保它在标签中

像这样。来源：http://www.w3schools.com/svg/svg_inhtml.asp

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

Answer 2

我认为你不应该将SVG翻译成HTML 这是一个粗略简化为什么我这么认为。

应该如何

SVG擅长描述向量（内容创建） HTML用于描述内容。

您创建内容（例如使用SVG的图像）您使用HTML来描述内容（将图像放在页面上的位置，图像是什么类型等等）您使用CSS来描述内容的外观（样式，如颜色，字体和布局）您使用JavaScript为内容添加行为（DOM操作，AJAX，动画等）。

然而 - 很多（如果不是大多数）这些事情可以单独使用SVG完成，虽然恕我直言，我认为不应该这样做。

你拥有什么

你有一个描述内容的SVG（I.E.尝试做HTML的工作）您想将其翻译为HTML。

我认为你应该做什么

我建议您学习HTML，然后使用HTML重新创建您使用的SVG 从我所看到的，它是一个非常简单的布局，一旦你知道你正在做什么，它不应该花很长时间。

P.S。
我建议明确指出w3schools.com 据我所知，有更好，更可靠的替代方案。

如何将svg文件更改为HTML5

2 个答案:

应该如何

你拥有什么

我认为你应该做什么