使用HTML SVG元素的更干净的方法?

米格迪克

我在各种HTML元素下都有几个SVG元素。正如您在下面的示例中看到的那样,它们占用了大量空间,并使html变得混乱。

我想知道是否有人对清除此问题的最佳方法有任何建议。我可以为每个SVG元素使用部分HTML视图,但这有点过头了,我能想到的一切。

<div id="canvasControl" class="cnvsControl" hidden="hidden" style="height:36px; background-color:black; position:relative;margin-top:-36px;z-index:9999;opacity: 0.2;">
    <div class="imageUpload canvasControlButton alignLeft" style="height:36px; position:relative;" title="Open File" id="btnOpenFile" name="btnOpenFile" onclick="snes_readfile(this)">
        <label for="btnFileImport" style="position:absolute;top:5px;">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="25" viewBox="0 0 512 512">
                <g id="icomoon-ignore"></g>
                <defs>
                    <path id="openFolder1" d="M416 480l96-256h-416l-96 256zM64 192l-64 288v-416h144l64 64h208v64z"></path>
                </defs>
                <use fill="#fff" xlink:href="#openFolder1"></use>
            </svg>
        </label>
        <input id="btnFileImport" type="file" onchange="snes_readfile(this)" />
    </div>
    <button class="canvasControlButton alignRight" title="Full screen" id="btnFullScreen" name="btnFullScreen">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="25" viewBox="0 0 512 512">
            <g id="icomoon-ignore"></g>
            <defs>
                <path id="outFullArrow1" d="M512 0h-208l80 80-96 96 48 48 96-96 80 80z"></path>
                <path id="outFullArrow2" d="M512 512v-208l-80 80-96-96-48 48 96 96-80 80z"></path>
                <path id="outFullArrow3" d="M0 512h208l-80-80 96-96-48-48-96 96-80-80z"></path>
                <path id="outFullArrow4" d="M0 0v208l80-80 96 96 48-48-96-96 80-80z"></path>
            </defs>
            <use fill="#fff" xlink:href="#outFullArrow1"></use>
            <use fill="#fff" xlink:href="#outFullArrow2"></use>
            <use fill="#fff" xlink:href="#outFullArrow3"></use>
            <use fill="#fff" xlink:href="#outFullArrow4"></use>
        </svg>
    </button>
    <button class="canvasControlButton alignRight" title="Bigger Screen" id="btnChangeScreenSize" name="btnChangeScreenSize">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="25" viewBox="0 0 512 512">
            <g id="icomoon-ignore"></g>
            <defs>
                <path id="outArrow1" d="M512 0v208l-80-80-96 96-48-48 96-96-80-80zM224 336l-96 96 80 80h-208v-208l80 80 96-96z"></path>
            </defs>
            <use fill="#fff" xlink:href="#outArrow1"></use>
        </svg>
    </button>
拉西克

您可以创建一个单独的SVG文件,然后将其链接到HTML文档,如下所示:

创建名为的SVG文件

一个.svg:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="25" viewBox="0 0 512 512">
            <g id="icomoon-ignore"></g>
            <defs>
                <path id="openFolder1" d="M416 480l96-256h-416l-96 256zM64 192l-64 288v-416h144l64 64h208v64z"></path>
            </defs>
            <use fill="#fff" xlink:href="#openFolder1"></use>
        </svg>

两个.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="25" viewBox="0 0 512 512">
        <g id="icomoon-ignore"></g>
        <defs>
            <path id="outFullArrow1" d="M512 0h-208l80 80-96 96 48 48 96-96 80 80z"></path>
            <path id="outFullArrow2" d="M512 512v-208l-80 80-96-96-48 48 96 96-80 80z"></path>
            <path id="outFullArrow3" d="M0 512h208l-80-80 96-96-48-48-96 96-80-80z"></path>
            <path id="outFullArrow4" d="M0 0v208l80-80 96 96 48-48-96-96 80-80z"></path>
        </defs>
        <use fill="#fff" xlink:href="#outFullArrow1"></use>
        <use fill="#fff" xlink:href="#outFullArrow2"></use>
        <use fill="#fff" xlink:href="#outFullArrow3"></use>
        <use fill="#fff" xlink:href="#outFullArrow4"></use>
    </svg>

三.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="25" viewBox="0 0 512 512">
        <g id="icomoon-ignore"></g>
        <defs>
            <path id="outArrow1" d="M512 0v208l-80-80-96 96-48-48 96-96-80-80zM224 336l-96 96 80 80h-208v-208l80 80 96-96z"></path>
        </defs>
        <use fill="#fff" xlink:href="#outArrow1"></use>
    </svg>

然后将HTML编辑为:

<div id="canvasControl" class="cnvsControl" hidden="hidden" style="height:36px; background-color:black; position:relative;margin-top:-36px;z-index:9999;opacity: 0.2;">
    <div class="imageUpload canvasControlButton alignLeft" style="height:36px; position:relative;" title="Open File" id="btnOpenFile" name="btnOpenFile" onclick="snes_readfile(this)">
        <label for="btnFileImport" style="position:absolute;top:5px;">
            <object>
            <embed scr="one.svg">
         </object>
        </label>
    <input id="btnFileImport" type="file" onchange="snes_readfile(this)" />
</div>
<button class="canvasControlButton alignRight" title="Full screen" id="btnFullScreen" name="btnFullScreen">
   <object>
        <embed scr="two.svg">
     </object>
</button>
<button class="canvasControlButton alignRight" title="Bigger Screen" id="btnChangeScreenSize" name="btnChangeScreenSize">
    <object>
        <embed scr="three.svg">
     </object>
</button>

希望它能有所帮助,并且如果解决了您的问题,请不要忘记验证答案。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用js添加html元素

来自分类Dev

使用angular.js传递文件输入文件的更干净方法

来自分类Dev

使用YUI创建HTML元素

来自分类Dev

使用svg设置属性的更简单方法?

来自分类Dev

使用jQuery创建HTML元素:正确的方法是什么?

来自分类Dev

使用javascript隐藏html元素

来自分类Dev

使用AngularJS将元素文本复制到title属性的干净方法

来自分类Dev

使用jQuery动画切换元素的干净方法

来自分类Dev

使HTML输入数字的向下箭头更大,更干净

来自分类Dev

从Wordpress插件输出HTML的更干净的方法是什么?

来自分类Dev

在Swift中使用更新功能的更干净(更好)的替代方法

来自分类Dev

有没有一种更干净的方法来使用try-with-resource和PreparedStatement?

来自分类Dev

更干净的使用re.sub的方式

来自分类Dev

使用for循环创建html元素

来自分类Dev

使用Autofac在依赖链中选择LifetimeScope的更干净方法

来自分类Dev

如何在SVG中使用内联HTML元素?

来自分类Dev

使用循环创建HTML元素

来自分类Dev

Postgresql:使用不同的参数多次重复查询-比联合体更干净的方法?

来自分类Dev

使用YUI创建HTML元素

来自分类Dev

使用svg设置属性的更简单方法?

来自分类Dev

有没有更短/更干净/更好的方法来使用此PHP文件功能?

来自分类Dev

使用javascript隐藏html元素

来自分类Dev

在HTML中使用SVG图片?

来自分类Dev

使用Ruby创建HTML元素

来自分类Dev

无法使用CSS对齐HTML和SVG元素

来自分类Dev

使用jQuery获取元素的.html()

来自分类Dev

使用JS单击HTML元素

来自分类Dev

使用“符号”和“使用”方法对齐 svg 元素

来自分类Dev

使用 Python 单击 HTML 元素

Related 相关文章

热门标签

归档