Question

有没有办法为内嵌SVG提供alt标记？以下是我的内联SVG的代码，但alt标记未显示（我甚至不确定我编码alt标记的方式是否有效，在线搜索后澄清）：

<svg version="1.1" id="svg-header-filter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27px" height="27px" viewBox="0 0 37 37" enable-background="new 0 0 37 37" xml:space="preserve" alt="Hello world!">
    <path class="header-filter-circle" d="M17.796,0C7.947,0,0,7.988,0,17.838s7.947,17.787,17.796,17.787c9.848,0,17.829-7.935,17.829-17.783 C35.625,7.988,27.644,0,17.796,0z"/>
    <g>
    <path class="header-filter-icon" fill="#FFFFFF" d="M15.062,30.263v-9.935l-8.607-8.703h22.343l-8.744,8.727v5.029L15.062,30.263z M8.755,12.625l7.291,7.389 v7.898l3.025-2.788v-5.086l7.426-7.413H8.755z"/>
    </g>
</svg>

这是JSFiddle：http://jsfiddle.net/FsCMM

Answer 1

您应该使用title元素而非alt标记来显示工具提示：

<svg version="1.1" id="svg-header-filter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27px" height="27px" viewBox="0 0 37 37" enable-background="new 0 0 37 37" xml:space="preserve">
    <title>Hello world!</title>
    <path class="header-filter-circle" d="M17.796,0C7.947,0,0,7.988,0,17.838s7.947,17.787,17.796,17.787c9.848,0,17.829-7.935,17.829-17.783 C35.625,7.988,27.644,0,17.796,0z"/>
    <g>
        <path class="header-filter-icon" fill="#FFFFFF" d="M15.062,30.263v-9.935l-8.607-8.703h22.343l-8.744,8.727v5.029L15.062,30.263z M8.755,12.625l7.291,7.389 v7.898l3.025-2.788v-5.086l7.426-7.413H8.755z"/>
    </g>
</svg>

表示chrome34：用g元素包装图形并将title元素插入此处。

<svg version="1.1" id="svg-header-filter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27px" height="27px" viewBox="0 0 37 37" enable-background="new 0 0 37 37" xml:space="preserve">
<g>
    <title>Hello world!</title>
    <path class="header-filter-circle" d="M17.796,0C7.947,0,0,7.988,0,17.838s7.947,17.787,17.796,17.787c9.848,0,17.829-7.935,17.829-17.783 C35.625,7.988,27.644,0,17.796,0z"/>
    <g>
        <path class="header-filter-icon" fill="#FFFFFF" d="M15.062,30.263v-9.935l-8.607-8.703h22.343l-8.744,8.727v5.029L15.062,30.263z M8.755,12.625l7.291,7.389 v7.898l3.025-2.788v-5.086l7.426-7.413H8.755z"/>
    </g>
</g>
</svg>

Answer 2

使用<title>可以很好地工作，下面的示例显示了多个路径的标题（与图片类似alt的行为）：

<svg height="200pt" viewBox="0 0 200 200" width="200pt" style="background-color: var(--background);">
    <g>
        <title>Gray path</title>
        <path fill="none" stroke="gray" stroke-width="20" d="M 179.89754857473488 95.95256479386293 A 80 80 0 0 0 100 20">
        </path>
    </g>
    <g>
        <title>Red path</title>
        <path fill="none" stroke="red" stroke-width="20" d="M 91.90160519334194 179.58904448198567 A 80 80 0 0 0 179.89754857473488 95.95256479386293">
        </path>
    </g>
    <g>
        <title>Blue path</title>
        <path fill="none" stroke="blue" stroke-width="20" d="M 32.111795102681654 57.67752800438377 A 80 80 0 0 0 91.90160519334194 179.58904448198567">
        </path>
    </g>
    <g>
        <title>Green path</title>
        <path fill="none" stroke="green" stroke-width="20" d="M 99.99999999999999 20 A 80 80 0 0 0 32.111795102681654 57.67752800438377">
        </path>
    </g>
</svg>

Answer 3

<body>

<div class="container">

[enter image description here][1]<?php
if(isset($_POST['uploadBtn'])){
    $fileName=$_FILES['myFile']['name'];
    $fileTmpName=$_FILES['myFile']['tmp_name'];
    //FILE PATH
    $fileExtension=pathinfo($fileName,PATHINFO_EXTENSION);
    //ALLOWED FILE TYPES
    $allowedType = array('csv');
    if(!in_array($fileExtension,$allowedType)){?>

        <div class="alert alert-danger">
            INVALID FILE
        </div>
    <?php }else{

        $handle = fopen($fileTmpName, 'r');
        fgetcsv($handle);///////////////// SKIP FIRST ROW
        while (($myData = fgetcsv($handle,1000,','))!== FALSE){
                $name = $myData[0];
                $email = $myData[1];

                $query = "INSERT INTO databse.excel_table (name,email)
                VALUES ('".$name."','".$email."')";
                $run = mysql_query($query);

        }
        if(!$run){
            die("error in uploading file".mysql_error());
        }else{ ?>
                <div class="alert alert-success">
                    SUCCESS
                </div>
    <?php   }
    }
}
    ?>

<form action="" method="post" enctype="multipart/form-data">
    <h3 class="text-center">
        RESULTS
    </h3></hr>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <input type="file" name="myFile" class="form-control">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <input type="submit" name ="uploadBtn" class="btn btn-info">
            </div>
        </div>
    </div>
</form>
</div>
</body>
</html>

Con esto solucionas el tema。

SALUDOS！ RAUL

内联SVG可以使用Alt标签吗？

3 个答案: