cycold / cycold.github.io

Please dot not star...
4 stars 1 forks source link

svg 图标在vue2.0中的问题 #136

Closed cycold closed 6 years ago

cycold commented 7 years ago

在vue1.0中可以直接在组件中使用

<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <symbol id="icon-user" viewbox="0 0 16 16">
          <title>user</title>
          <g transform="scale(0.015625, 0.015625)">
            <path d="M926.26863 957.936375l-55.567573 0C859.981924 816.071344 768.64366 >
        </symbol>
      </defs>
    </svg>

<svg class="icon"> <use xlink:href="#icon-user"></use> </svg>

但是在vue2.0中的组件中使用时,会出现 不能scale svg图标 问题 当将symbol 放在非vue组件中时可以进行使用 这可能与vue2.0新的dom渲染方式有关. 所以最好是将需要的symbol 放在body中, 不能放在组件中使用了

http://stackoverflow.com/questions/31053226/scale-inline-svg-symbol-referenced-with-use