SVG嵌入到HTML中，允許在懸停的容器上使用腳本CONTAINER或a-Tag

-1

我喜歡在可調整大小的導航中將SVG圖像（圖標）嵌入HTML頁面。在鼠標懸停或懸停時，我喜歡更改SVG-Image的顏色。那不是問題。我知道，我可以用CSS或JavaScript編輯SVG-Image。SVG嵌入到HTML中，允許在懸停的容器上使用腳本CONTAINER或a-Tag

問題：我喜歡懸停嵌入SVG圖像的a-tag或Element（li，div）。由於CSS背景圖像腳本是不允許的，我知道。但是，<embed>, <object>, or <iframe>呢？它不工作...

它僅適用，如果我嵌入SVG-圖片，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>

，工程NOT（嵌入式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>

來源

2013-06-11 David Strauch

的IMAGE_NAME.svg的代碼是這樣的XML-SVG的例子，工作原理相同。它也有一個ID（#path） –

您需要的SVG對象的引用第一。給嵌入標籤的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 
    } 
}

來源

2013-06-19 15:03:09 Bruno

SVG嵌入到HTML中，允許在懸停的容器上使用腳本CONTAINER或a-Tag

回答

相關問題