内联 SVG 不缩放

Question

我正在尝试为一些矢量图形制作动画。因此，我需要使用 svg inline 或使用 https://github.com/jonathantneal/svg4everybody 之类的东西在 IE 中进行外部嵌入。所以我的 HTML 目前看起来像这样：

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="chart" viewBox="0 0 1042 1024"><!-- SVG CODE --></symbol>
</svg>

<svg role="img" class="icon" width="200" height="200">
  <use xlink:href="#chart"></use>
</svg>

http://codepen.io/anon/pen/LEWjvX

但是您可能会看到 SVG 非常小，尽管我在 HTML 和 CSS 中都使用了 width（不确定我是否需要两者？）。它只是无法扩展。根据我读到的很多关于这个问题的文章（比如这篇 http://css-tricks.com/svg-symbol-good-choice-icons/ or http://css-tricks.com/scale-svg/），它应该是这样工作的。我做错了什么？

仅供参考：我使用 icomoon 创建 SVG 精灵，使用 Illustrator 创建 SVG。为了使 SVG 动画化，我给大部分路径起了一个 class 名称，如果这有什么不同的话。

Answer 1

试试这个；将符号的 viewBox 更改为更接近其设计尺寸。我快速查看了路径的外部尺寸，然后假设为 100x100。

<symbol id="compass" viewBox="0 0 100 100">

代码笔：http://codepen.io/rfornal-ssi/pen/GgWMvZ

我只调整了一部分，假设您可以从这一点开始继续使用其余代码。

更新：根据 OP 的测试，我们了解到不需要将 viewBox 添加到 <svg> 标签本身，因为使用了 <symbol> 标签。

Answer 2

我不确定我是否清楚地了解您寻求帮助的问题是什么，所以我会尽量回答我在您的代码段中看到的最大值。

如果您看不到 chart，我认为更多是因为默认的 fill 颜色是黑色，而不是因为大小。如果您将 fill: #FFF 添加到 #wrapper 的 css 或适当的 svg{} 语句中，您会清楚地看到它。
如果你的指南针这么小，我想是因为你绘制的路径在1024x1024的文档中只有50px大。（你正在为你的 <symbol> 元素设置一个 viewBox="0 0 1024 1024" 但如果你想稍后使用转换，将它设置为 0 0 50 50 之类的东西会有所帮助，或者更好的是，在文档中重新绘制它它们很合身）。
你说你想让那些图形动起来。实际上有很多方法可以做到这一点。您可以查看 CSS animations (via a style sheet) or SMIL (directly in the inline svg) or via javascript (by modifying directly the attributes as noticed in Nicholas Kyriakides 答案）。查看下面代码段中的示例。

var scale = 1;
window.onload = function(){
document.getElementById('p').addEventListener('click', function(){document.getElementById('linked').setAttribute('transform', 'scale('+(scale+=.1)+')');}, false);
document.getElementById('m').addEventListener('click', function(){document.getElementById('linked').setAttribute('transform', 'scale('+(scale-=.1)+')');}, false);
};

.icon {
 width: 400px;
 height: 200px;
 }
.wrapper {
 background: black;
 width: 80%;
 max-width: 400px;
 margin: 0 auto;
 color:#fff;
 fill: #fff;
 }
text {
 cursor: pointer;
 }
.icon:hover{
 cursor: pointer;
 }
.icon:hover .chart{
 fill: #FAF;
 -webkit-animation: color 5s;
 animation: color 5s forwards alternate;
 }
@-webkit-keyframes color{ 
  0%{ fill : #FFF;}
  10%{ fill : #508694;}
  50%{fill: #FBB03B;}
  90%{ fill : #D19B6F;}
  100%{ fill : #FFF;}
  }
@keyframes color{ 
  0%{ fill : #FFF;}
  10%{ fill : #508694;}
  50%{fill: #FBB03B;}
  90%{ fill : #D19B6F;}
  100%{ fill : #FFF;}
  }

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
 <symbol id="chart" viewBox="0 0 1042 1024">
  <path class="chart" d="M893.78 455.769h145.017v568.231h-145.017v-568.231z"  />
  <path class="chart" d="M671.815 0h145.017v1024h-145.017v-1024z"  />
  <path class="chart bar3" d="M446.89 624.462h145.017v396.578h-145.017v-396.578z"  />
  <path class="chart" d="M224.925 227.884h145.017v796.116h-145.017v-796.116z"  />
  <path class="chart" d="M0 71.029h145.017v952.971h-145.017v-952.971z"  />
 </symbol>
 <symbol id="compass" viewBox="0 0 46.6 46.6">
  <path class="compas__outer" fill="#FFFFFF" d="M22.7,0C10.2,0,0,10.2,0,22.7c0,12.5,10.2,22.7,22.7,22.7   c12.5,0,22.7-10.2,22.7-22.7C45.4,10.2,35.3,0,22.7,0L22.7,0z M22.7,42.9c-11.1,0-20.1-9-20.1-20.1c0-11.1,9-20.1,20.1-20.1   c11.1,0,20.1,9,20.1,20.1C42.9,33.8,33.8,42.9,22.7,42.9L22.7,42.9z M22.7,42.9"/>
  <path class="compass__needle" fill="#FFFFFF" d="M24.7,20.7C24,20,23,19.7,22,19.9l1.5-1.5l-12-6.9l6.9,12l1.5-1.5   c-0.2,0.9,0,2,0.8,2.7c0.7,0.7,1.8,1,2.7,0.8L21.9,27l12,6.9l-6.9-12l-1.5,1.5C25.7,22.5,25.5,21.4,24.7,20.7L24.7,20.7z    M21.8,23.6c-0.5-0.5-0.5-1.3,0-1.8c0.5-0.5,1.3-0.5,1.8,0c0.5,0.5,0.5,1.3,0,1.8C23.1,24.1,22.3,24.1,21.8,23.6L21.8,23.6z    M31.9,31.9l-8.7-5.1l3.7-3.7L31.9,31.9z M31.9,31.9">
   <animateTransform attributeName="transform" begin="0s" dur="2s" type="rotate" from="0 22.7 22.7" to="360 22.7 22.7" repeatCount="indefinite" />
  </path>
 </symbol>
 <symbol id="linked-in" viewBox="0 0 1070 1024">
  <path d="M241.778 1024v-689.778h-227.556v689.778h227.556zM128 238.222c78.222 0 128-53.333 128-120.889s-46.222-117.333-128-117.333c-78.222 0-128 49.778-128 120.889 0 64 49.778 117.333 128 117.333v0 0zM369.778 1024c0 0 3.556-625.778 0-689.778h227.556v99.556c28.444-46.222 85.333-117.333 209.778-117.333 149.333 0 263.111 99.556 263.111 309.333v394.667h-227.556v-366.222c0-92.444-32-156.444-117.333-156.444-64 0-99.556 42.667-117.333 85.333-7.111 14.222-7.111 35.556-7.111 56.889v384h-231.111z" fill="#FFF"/>
 </symbol>
</svg>

<div class="wrapper">
 <h1>CSS @keyframe</h1>
 <svg role="img" class="icon" width="400" height="200">
 <!-- I had to get it out of the <use> because webkit browsers #@ø‡~! http://codepen.io/AmeliaBR/pen/lshrp-->
  <g id="chart">
   <path class="chart" d="M172.1,90.6H200V200h-27.9V90.6L172.1,90.6z"/>
   <path class="chart" d="M129.3,2.8h27.9V200h-27.9L129.3,2.8L129.3,2.8z"/>
   <path class="chart" d="M86,123.1H114v76.4H86V123.1L86,123.1z"/>
   <path class="chart" d="M43.3,46.7h27.9V200H43.3L43.3,46.7L43.3,46.7z"/>
   <path class="chart" d="M0,16.5h27.9V200H0C0,200,0,16.5,0,16.5z"/>
  </g>
  <use xlink:href="#chart" id="charts" x="100"></use>
 </svg>
 <h1>SMIL animateTransfrom</h1>
 <svg viewBox="0 0 1024 1024" preserveAspectRatio="xMidYMin slice" style="width: 100%; padding-bottom: 80%; height: 70px; overflow: visible">
  <use xlink:href="#compass"></use>
 </svg>
 <h1>Javascript</h1>
 <svg viewBox="0 0 1024 1024">
  <use xlink:href="#linked-in" id="linked"></use>
  <text id="p" font-size="200" y="140" x="650">+</text>
  <text id="m" font-size="200" y="140" fill="" x="800">-</text>
 </svg>
</div>

内联 SVG 不缩放

Inline SVG doesn't scale

html

css

svg