blocks|key|309400|text|使用javascript执行此操作，并将onClick-attribute添加到您的object-element中：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|309401|<object+data="mysvg.svg"+type="image/svg%2Bxml"+onClick="window.location.href='http://google.at';">
++++Your+browser+doesn't+support+SVG+images
</object>|code-block|syntax|javascript|309402|entityMap^0|K|7|16|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

Do it with javascript and add a <code>onClick</code>-attribute to your <code>object</code>-element:

<pre><code>&lt;object data="mysvg.svg" type="image/svg+xml" onClick="window.location.href='http://google.at';"&gt;
 &lt;span&gt;Your browser doesn't support SVG images&lt;/span&gt;
&lt;/object&gt;
</code></pre>

blocks|key|309441|text|最简单的方法是不使用。取而代之的是使用标签，锚应该工作得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|309442|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

The easiest way is to not use &lt;object>. Instead use an &lt;img> tag and the anchor should work just fine.

blocks|key|309472|text|我遇到了同样的问题，并设法通过以下方式解决了这个问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|309473|使用设置为block或inline-block的元素包装对象|309474|<a>
++++
++++++++<object></object>
++++
</a>|code-block|syntax|javascript|309475|添加到<a>标签：|offset|length|style|CODE|309476|display:+inline-block;
position:+relative;+
z-index:+1;|309477|和标记：|309478|display:+inline-block;|309479|和<object>标记：|309480|position:+relative;+
z-index:+-1|309481|请看这里的示例：http://dabblet.com/gist/d6ebc6c14bd68a4b06a6|309482|通过此处的评论20找到https://bugzilla.mozilla.org/show_bug.cgi?id=294932|309483|entityMap|0|LINK|mutability|MUTABLE|url|http://dabblet.com/gist/d6ebc6c14bd68a4b06a6|1|https://bugzilla.mozilla.org/show_bug.cgi?id=294932^0|0|0|0|3|3|0|0|1|6|0|0|1|8|0|0|8|18|0|0|B|1F|1|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1D|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1E|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1F|8|@$K|1G|L|1H|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|1I|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1J|8|@$K|1K|L|1L|M|N]]|9|@]|A|$]]|$1|S|3|T|5|F|7|1M|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|1N|8|@$K|1O|L|1P|M|N]]|9|@]|A|$]]|$1|W|3|X|5|F|7|1Q|8|@]|9|@]|A|$G|H]]|$1|Y|3|Z|5|6|7|1R|8|@]|9|@$K|1S|L|1T|1|1U]]|A|$]]|$1|10|3|11|5|6|7|1V|8|@]|9|@$K|1W|L|1X|1|1Y]]|A|$]]|$1|12|3|-4|5|6|7|1Z|8|@]|9|@]|A|$]]]|13|$14|$5|15|16|17|A|$18|19]]|1A|$5|15|16|17|A|$18|1B]]]]

I had the same issue and managed to solve this by:

Wrapping the object with an element set to block or inline-block

<pre><code>&lt;a&gt;
 &lt;span&gt;
 &lt;object&gt;&lt;/object&gt;
 &lt;/span&gt;
&lt;/a&gt;
</code></pre>

Adding to <code>&lt;a&gt;</code> tag:

<pre><code>display: inline-block;
position: relative; 
z-index: 1;
</code></pre>

and to the <code>&lt;span&gt;</code> tag:

<pre><code>display: inline-block;
</code></pre>

and to the <code>&lt;object&gt;</code> tag:

<pre><code>position: relative; 
z-index: -1
</code></pre>

See an example here: <a href="http://dabblet.com/gist/d6ebc6c14bd68a4b06a6" rel="noreferrer">http://dabblet.com/gist/d6ebc6c14bd68a4b06a6</a>

Found via comment 20 here <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=294932" rel="noreferrer">https://bugzilla.mozilla.org/show_bug.cgi?id=294932</a>

blocks|key|309539|text|理查德解决方案的简化。至少可以在Firefox、Safari和Opera中运行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|309540|<a+href="..."+style="display:+block;">
++++<object+data="..."+style="pointer-events:+none;"+/>
</a>|code-block|syntax|javascript|309541|有关其他解决方案，请参阅http://www.noupe.com/tutorial/svg-clickable-71346.html。|offset|length|309542|entityMap|0|LINK|mutability|MUTABLE|url|http://www.noupe.com/tutorial/svg-clickable-71346.html^0|0|0|C|1I|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

A simplification of Richard's solution. Works at least in Firefox, Safari and Opera:

<pre><code>&lt;a href="..." style="display: block;"&gt;
 &lt;object data="..." style="pointer-events: none;" /&gt;
&lt;/a&gt;
</code></pre>

See <a href="http://www.noupe.com/tutorial/svg-clickable-71346.html" rel="noreferrer">http://www.noupe.com/tutorial/svg-clickable-71346.html</a> for additional solutions.

blocks|key|309571|text|我很想为此负责，但我在这里找到了一个解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|309572|https://teamtreehouse.com/forum/how-do-you-make-a-svg-clickable|offset|length|309573|将以下内容添加到锚点的css中：|309574|a.svg+{
++position:+relative;
++display:+inline-block;+
}
a.svg:after+{
++content:+"";+
++position:+absolute;
++top:+0;
++right:+0;
++bottom:+0;
++left:0;
}


<a+href="#"+class="svg">
++<object+data="random.svg"+type="image/svg%2Bxml">
++++<img+src="random.jpg"+/>
++</object>
</a>|code-block|syntax|javascript|309575|Link在svg和回退上工作。|309576|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1R|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|11|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|12|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|C]]]]

Would like to take credit for this but I found a solution here: 

<a href="https://teamtreehouse.com/forum/how-do-you-make-a-svg-clickable">https://teamtreehouse.com/forum/how-do-you-make-a-svg-clickable</a>

add the following to the css for the anchor:

<pre><code>a.svg {
 position: relative;
 display: inline-block; 
}
a.svg:after {
 content: ""; 
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left:0;
}


&lt;a href="#" class="svg"&gt;
 &lt;object data="random.svg" type="image/svg+xml"&gt;
 &lt;img src="random.jpg" /&gt;
 &lt;/object&gt;
&lt;/a&gt;
</code></pre>

Link works on the svg and on the fallback.

blocks|key|309622|text|你也可以把类似这样的东西放在你的SVG的底部(就在结束的</svg>标签之前)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|309623|<a+xmlns="http://www.w3.org/2000/svg"+id="anchor"+xlink:href="/"+xmlns:xlink="http://www.w3.org/1999/xlink"+target="_top">
++++<rect+x="0"+y="0"+width="100%25"+height="100%25"+fill-opacity="0"/>
</a>|code-block|syntax|javascript|309624|然后只需要修改链接就可以了。我使用了100%25的宽度和高度来覆盖它所在的SVG。这项技术的功劳归功于Clearleft.com的聪明人--这是我第一次看到它的地方。|309625|entityMap^0|S|6|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

You could also stick something like this in the bottom of your SVG (right before the closing <code>&lt;/svg&gt;</code> tag):

<pre><code>&lt;a xmlns="http://www.w3.org/2000/svg" id="anchor" xlink:href="/" xmlns:xlink="http://www.w3.org/1999/xlink" target="_top"&gt;
 &lt;rect x="0" y="0" width="100%" height="100%" fill-opacity="0"/&gt;
&lt;/a&gt;
</code></pre>

Then just amend the link to suit. I have used 100% width and height to cover the SVG it sits in. Credit for the technique goes to the smart folks at Clearleft.com - that's where I first saw it used.

blocks|key|309668|text|我也通过编辑svg文件解决了这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|309669|我将整个svg图形的xml包装在一个具有click事件的组标记中，如下所示：|309670|<svg+.....>
<g+id="thefix"+onclick="window.top.location.href='http://www.google.com/';">
+
</g>
</svg>|code-block|syntax|javascript|309671|解决方案适用于所有支持对象svg脚本的浏览器。(对于不支持svg的浏览器，在object元素中默认一个img标记，您将覆盖所有浏览器)|309672|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I resolved this by editing the svg file too. 

I wrapped the xml of the whole svg graphic in a group tag that has a click event as follows:

<pre><code>&lt;svg .....&gt;
&lt;g id="thefix" onclick="window.top.location.href='http://www.google.com/';"&gt;
 &lt;!-- ... your graphics ... --&gt;
&lt;/g&gt;
&lt;/svg&gt;
</code></pre>

Solution works in all browsers that support object svg script. (default a img tag inside your object element for browsers that don't support svg and you'll cover the gamut of browsers)

blocks|key|526674|text|我尝试过这种简单明了的方法，似乎在所有浏览器中都有效。在svg文件中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|526675|​|526676|<svg>
<a+id="anchor"+xlink:href="http://www.google.com"+target="_top">
++

++
</a>
</svg>|code-block|syntax|javascript|526677|526678|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

i tried this clean easy method and seems to work in all browsers.
Inside the svg file:

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg&gt;
&lt;a id="anchor" xlink:href="http://www.google.com" target="_top"&gt;
 
&lt;!--your graphic--&gt;
 
&lt;/a&gt;
&lt;/svg&gt;
 </code></pre>
</div>
</div>

blocks|key|526735|text|只要不使用<object>即可。这是一个适用于我的<a>和<svg>标签的解决方案：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|526736|<a+href="<your-link>"+class="mr-5+p-1+border-2+border-transparent+text-gray-400+rounded-full+hover:text-white+focus:outline-none+focus:text-white+focus:bg-red-700+transition+duration-150+ease-in-out"+aria-label="Notifications">
++++<svg+xmlns="http://www.w3.org/2000/svg"+viewBox="0+0+24+24"+width="30"+
++++height="30"><path+class="heroicon-ui"+fill="#fff"+d="M17+16a3+3+0+1+1-2.83+
++++2H9.83a3+3+0+1+1-5.62-.1A3+3+0+0+1+5+12V4H3a1+1+0+1+1+0-2h3a1+1+0+0+1+1+
++++1v1h14a1+1+0+0+1+.9+1.45l-4+8a1+1+0+0+1-.9.55H5a1+1+0+0+0+0+2h12zM7+12h9.38l3-+
+++6H7v6zm0+8a1+1+0+1+0+0-2+1+1+0+0+0+0+2zm10+0a1+1+0+1+0+0-2+1+1+0+0+0+0+2z"/>
++++</svg>
</a>|code-block|syntax|javascript|526737|entityMap^0|5|8|P|3|T|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

Just don't use <code>&lt;object&gt;</code>. Here's a solution that worked for me with <code>&lt;a&gt;</code> and <code>&lt;svg&gt;</code> tags:

<pre><code>&lt;a href="&lt;your-link&gt;" class="mr-5 p-1 border-2 border-transparent text-gray-400 rounded-full hover:text-white focus:outline-none focus:text-white focus:bg-red-700 transition duration-150 ease-in-out" aria-label="Notifications"&gt;
 &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" 
 height="30"&gt;&lt;path class="heroicon-ui" fill="#fff" d="M17 16a3 3 0 1 1-2.83 
 2H9.83a3 3 0 1 1-5.62-.1A3 3 0 0 1 5 12V4H3a1 1 0 1 1 0-2h3a1 1 0 0 1 1 
 1v1h14a1 1 0 0 1 .9 1.45l-4 8a1 1 0 0 1-.9.55H5a1 1 0 0 0 0 2h12zM7 12h9.38l3- 
 6H7v6zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm10 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/&gt;
 &lt;/svg&gt;
&lt;/a&gt;
</code></pre>

blocks|key|309827|text|我用的是简单的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|309828|++++++++<a+href="#">
++++++++++++<img+src="../../assets/images/logo.svg"+alt="">
++++++++</a>|code-block|syntax|javascript|309829|它工作得很好，除了我试图应用一个:hover状态。把我带到这里的是当我使用|309830|++++++++<a+href="#">
++++++++++++<object+data="../../assets/images/logo.svg"+type="image/svg%2Bxml"+class="logo">
++++++++++++</object>
++++++++</a>|309831|我丢失了我的链接，并注意到在DevTools中链接仍然出现在SVG周围，但是:hover状态起作用了。我的链接使用了energee的优雅答案，但我当然失去了:hover。因此，对于将:hover更改应用到SVG而言，object标记看起来不是一个很好的解决方案。|309832|我很好奇，为什么不使用img标记来显示SVG，而不添加任何特殊的东西，比如:hover？使用img标记也适用于a标记。|309833|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I was using simply
<pre><code> &lt;a href=&quot;#&quot;&gt;
 &lt;img src=&quot;../../assets/images/logo.svg&quot; alt=&quot;&quot;&gt;
 &lt;/a&gt;
</code></pre>
Which works fine except I was trying to apply a :hover state. What brought me here was when I used
<pre><code> &lt;a href=&quot;#&quot;&gt;
 &lt;object data=&quot;../../assets/images/logo.svg&quot; type=&quot;image/svg+xml&quot; class=&quot;logo&quot;&gt;
 &lt;/object&gt;
 &lt;/a&gt;
</code></pre>
I lost my link and noticed in DevTools that the link still appeared around the SVG, but the :hover state worked. Utilizing energee's elegant answer, my link worked, but of course I lost the :hover. So it looks like the object tag isn't a great solution for applying a :hover change to an SVG.
I am curious, why would you not use the img tag to display an SVG without anything special added to it, like :hover? Using the img tag also works with the a tag.

I have an SVG object in my HTML page and am wrapping it in an anchor so when the svg image is clicked it takes the user to the anchor link.

<pre><code>&lt;a href="http://www.google.com/"&gt;
 &lt;object data="mysvg.svg" type="image/svg+xml"&gt;
 &lt;span&gt;Your browser doesn't support SVG images&lt;/span&gt;
 &lt;/object&gt;
&lt;/a&gt;
</code></pre>

When I use this code block, clicking the svg object doesn't take me to google. In IE8&lt; the span text is clickable.

I do not want to modify my svg image to contain tags.

My question is, how can I make the svg image clickable?

make an html svg object also a clickable link

我在HTML页面中有一个SVG对象，并将其包装在一个锚点中，因此当单击svg图像时，它会将用户带到锚点链接。<a href="http://www.google.com/"> <object data="mysvg.svg" type="image/svg+xml"> Your brow...

问使html svg对象也成为可单击的链接。
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使html svg对象也成为可单击的链接。EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使html svg对象也成为可单击的链接。
EN