文章/答案/技术大牛

发布

社区首页 >问答首页 >IcoMoon SVG不显示

问IcoMoon SVG不显示
EN

Stack Overflow用户

提问于 2016-11-13 16:51:06

回答 1查看 1.8K关注 0票数 0

我用IcoMoon创建了一些图标，但稍微改变了实现。我使用这些with React，所以我没有在<body>标记中添加SVG定义，然后使用xLink将其包含到我的页面中。

我像这样分割图标(举个例子)：

function playIcon() {
  return (
    <symbol id="icon-stop" viewBox="0 0 25 32">
      <path className="path1" d="M24.704 16.544l-23.712 13.184q-0.416 0.224-0.704 0.064t-0.288-0.64v-26.304q0-0.448 0.288-0.64t0.704 0.064l23.712 13.184q0.416 0.224 0.416 0.544t-0.416 0.544z"></path>
    </symbol>
  );
}

function stopIcon() {
  return (
    <symbol id="icon-stop" viewBox="0 0 27 32">
      <path className="path1" d="M27.424 3.424v25.152q0 0.448-0.32 0.8t-0.832 0.352h-25.12q-0.48 0-0.8-0.352t-0.352-0.8v-25.152q0-0.448 0.352-0.8t0.8-0.352h25.12q0.48 0 0.832 0.352t0.32 0.8z"></path>
    </symbol>
  );
}

function renderIcon(icon) {
  switch (icon) {
    case 'play': 
      return playIcon();
    case 'stop':
      return stopIcon();
  }
}

const Icon = ({ icon }) => (
  <svg className={`icon icon-${icon}`} style={{position: 'absolute'}, {width: 0}, {height: 0}, {overflow: 'hidden'}} version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
    <defs>
     {renderIcon(icon)}
    </defs>
  </svg>
);

export default Icon;

相应的SCSS (稍微清理一下IcoMoon CSS )是：

.icon {
  display: inline-block;
  fill: #000;
  height: 1em;
  stroke: #000;
  stroke-width: 0;
  width: 1em;
}

.icon-play {
  width: .78515625em;
}

.icon-stop {
  width: .857421875em;
}

当我使用Chrome工具时，我可以看到SVG和代码看起来不错，但是它没有渲染任何东西。只是一块空白的小块。

我用呈现的SVG创建了一个JSFiddle。在这里，它也呈现为空白。

reactjs

svg

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-11-13 17:09:20

似乎viewBox属性有问题。当我移除defs &symbol并更新viewBox标记时，它似乎是有效的。这是更新的jsFiddle。把这些东西清理干净，你就会没事的。

<svg class="icon icon-play" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden;" width="24" height="30" viewBox="0 0 24 30">
   <g id="icon-play">
     <path d="M24.704 16.544l-23.712 13.184q-0.416 0.224-0.704 0.064t-0.288-0.64v-26.304q0-0.448 0.288-0.64t0.704 0.064l23.712 13.184q0.416 0.224 0.416 0.544t-0.416 0.544z"></path>
   </g>
</svg>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40576371

复制

相似问题

问IcoMoon SVG不显示
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IcoMoon SVG不显示EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IcoMoon SVG不显示
EN