Question

我喜欢在可调整大小的导航中将SVG-Image（图标）嵌入到HTML页面中。在鼠标悬停或悬停时，我喜欢更改SVG-Image的颜色。那不是问题。我知道，我可以使用CSS或JavaScript编辑SVG-Image。

问题：我喜欢悬停嵌入了SVG-Image的a-tag或Element（li，div）。由于不允许CSS-background-image脚本，我知道。但是，<embed>, <object>, or <iframe>呢？它不起作用......

只有将SVG-Image-XML直接嵌入到HTML页面中才有效...

一些有效的代码（直接嵌入式XML SVG）：

<style>
    div {
        width: 100%;
        height: 100%;
    }
    div:hover #path {
        fill: green;
    }
</style>

<div>
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<g>
    <g>
        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="256" y1="50.3503" x2="256" y2="461.6497">
            <stop  offset="0" style="stop-color:#F2F2F2"/>
            <stop  offset="1" style="stop-color:#CCCCCC"/>
        </linearGradient>
        <path id="path" fill="url(#SVGID_1_)" d="M320.073,284.756c87.603-150.03,21.473-234.405-64.072-234.405
            c-87.231,0-145.302,84.811-64.072,234.405c27.412,50.483-29.608,62.394-87.375,75.718
            c-59.012,13.609-54.473,44.723-54.473,101.176h255.945c-18.591-19.779-30.001-46.384-30.001-75.608
            C276.025,352.527,298.795,321.198,320.073,284.756z M386.513,310.556c-41.688,0-75.485,33.797-75.485,75.485
            c0,41.689,33.797,75.486,75.485,75.486c41.69,0,75.487-33.797,75.487-75.486C462,344.353,428.203,310.556,386.513,310.556z
             M393.424,409.851h-34.069v10.122l-33.864-19.555l33.864-19.558v10.121h34.069V409.851z M416.87,393.977v-10.122h-34.069v-18.869
            h34.069v-10.122l33.864,19.555L416.87,393.977z"/>
    </g>
</g>
</svg>

</div>

某些无效的代码（嵌入式嵌入式SVG）：

<style>
    div {
        width: 100%;
        height: 100%;
        background: url(iconmonsstr-gear-10-icon.svg) top center no-repeat;
        background-size: 100%;
    }
    div:hover #path{
        fill: green;
    }
</style>

<div>
    <embed src="IMAGE_NAME.svg" type="image/svg+xml" /> 
</div>

Answer 1

首先需要对svg对象的引用。给embed标记一个id，然后试试这个：

function init() {
    var svgdoc = null;
    var svgwin = null;

    var embed = document.getElementById('id');//embed id
    try {
        svgdoc = embed.getSVGDocument();
    } catch(exception) {
        // ignore errors
    }
    if (svgdoc && svgdoc.defaultView)// try the W3C standard way first
        svgwin = svgdoc.defaultView;
    else if (embed.window)//if it fails try a Non-Standard way
        svgwin = embed.window;
    else
        try {
            svgwin = embed.getWindow();
        } catch(exception) {
            //ignore errors
        }

    if (svgwin !== null) {//svgdoc should have a reference to [object SVGDocument]
        //do stuff
        //svgwin.document.getElementById("svg_object_id").style.setProperty("fill-opacity", "0.0", ""); //example
    }
}

SVG嵌入到HTML中，允许在悬停CONTAINER或a-Tag上使用脚本

1 个答案: