从外部html文件

时间:2016-11-14 16:16:06

标签: svg

的index.html

<div class="button-icon">
  <svg width="950px" height="605px" viewBox="0 0 950 605" >
		<use xlink:href="assets/svgs/front-view-1-g2.svg#front-view-1-g2"  />
  </svg>
</div>

正视-1- g2.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <defs>
        <g id="dark-rectangle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" >
            <text id="2" font-family="AvenirPrimaryHMHMath" font-size="10" width="12" height="12"  font-weight="normal" fill="#000000">
                <tspan x="83" y="15">31</tspan>
            </text>
            <rect id="path-1" transform="translate(83.000000, 17.000000)" x="0" y="0" width="12" height="12"  fill="#9b9b9b" ></rect>
        </g>
        
    </defs>
    <g id="iPad" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="front-view-1-g2">
                <use  xlink:href="#dark-rectangle"></use>
                <use transform="translate(110.000000, 0.000000)" xlink:href="#dark-rectangle"></use>
        </g>
    </g>
</svg>

我只有一个组,但需要调用它2次并更改第二组的位置,这就是为什么我使用转换到第二个使用标签,但它不能在IE浏览器中工作。

如果我在html文件中放置use标签,那么也转换为不在IE中工作。 它在Chrome和Mozilla中正常运行。

注意:在.svg文件中提到时使用标记不起作用,并且在.html文件中提到使用时转换不起作用。

1 个答案:

答案 0 :(得分:1)

嘿,我找到了答案。

转换将在IE中使用标记,因为IE不会呈现标记,它直接从.svg文件呈现特定组的子元素。

在我的上述情况中,我需要创建另一个矩形组赋值转换并使用该组。