Question

我想使用svg文件中的img / 1.png图像滚动到html id标签

我的Html块

<object width="1024" height="597" data="svg/index/1.svg" type="image/svg+xml" id="pdf1" style="width:1024px; height:597px; background-color:white; -moz-transform:scale(1); z-index: 0;">
</object>

我的Svg文件1.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
          <style type="text/css"><![CDATA[
             .g1_1{
                  fill: #8FEFCA;
                  fill-opacity: 0.71000695;
             }
             .g2_1{
                  fill: #8EDBED;
                  fill-opacity: 0.5399929;
             }
          ]]></style>
     </defs>
     <path d="M1024,597L0,597L0,320l1024,0l0,277Z" class="g1_1" />
     <path d="M455,597l569,0L1024,0l-9,0Z" class="g2_1" />
     <a xlink:href="#p2">
           <image x="690" y="290" width="25" height="24" xlink:href="img/1.png" />
     </a>
</svg>

我试图在svg文件中使用jquery，但我在html文件中声明的jquery滚动函数未被调用

<div id = "p2"> scroll here </div>

测试网址：http://cabitsystems.com/svgtest/tt.html

Answer 1

我以另一种方式解决....我从svg文件中提取图像然后使用位置将其放在svg上

html块

<a href="#p2" onclick="alert('hiii')">
    <img src="svg/index/img/1.png" id="p1x" x="690" y="290" z="300" width="25" height="24">
</a>

和小css

 a {
  display: inline-block;
  /* padding: 27px; */
  font-size: 17px;
  font-family: 'Open Sans', sans-serif;
  text-decoration: none;
  color: white;
  left: 685px;
  top: 200px;
  position: absolute;

如何制作svg对象可点击链接？

1 个答案: