Question

我用IcoMoon创建了一些图标，但我稍微改变了实现。我在React中使用这些，因此我没有在HTML的<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 Dev Tools时，我可以看到SVG和代码看起来没问题，但它不会呈现任何内容。只是一个空白的小块。

我使用渲染的SVG创建了JSFiddle。在这里它也呈现为空白。

Answer 1

似乎viewBox属性存在问题。当我删除defs＆amp; symbol并更新似乎有效的viewBox代码。这是updated jsFiddle。清理那些svgs，你应该没事。

<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>

IcoMoon SVG没有显示

1 个答案: