Inline 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 довольно мало, хотя я использовал width как в HTML и CSS (не уверен, если мне нужно другое?) , Он просто не масштабируется. Согласно многим статьям, которые я прочитал об этой проблеме (например, этот http://css-tricks.com/svg-symbol-good-choice-icons/ или http://css-tricks.com/scale-svg/), он должен работать именно так. Что я делаю не так?

FYI: Я использовал icomoon для создания спрайта SVG и Illustrator для создания SVG. Чтобы оживить SVG, я дал большинство путей имя класса, если это имеет значение.

Answer 1

Я не уверен, что понимаю, в чем проблема, которую вы просите о помощи, поэтому я попытаюсь ответить на максимум, который я видел в вашем фрагменте.

• Если вы не можете увидеть chart, я думаю, что это больше из-за цвета по умолчанию fill быть черным, чем из-за размера. Если вы добавите fill: #FFF в свой #wrapper 's css или в соответствующее заявление svg{}, вы увидите это ясно.

• Если ваш компас настолько мал, я думаю, это связано с тем, что ваши рисунки только 50px большие в документе 1024x1024. (Вы устанавливаете viewBox="0 0 1024 1024" в свой элемент <symbol>, но установка его на что-то вроде 0 0 50 50 поможет, если вы захотите использовать преобразования позже или даже лучше, перерисуйте их в документе, где они подходят правильно).

• Вы говорите, что хотите оживить эти графики. На самом деле есть много способов сделать это. Вы можете посмотреть анимацию CSS (через таблицу стилей) или SMIL (непосредственно в inline svg) или через javascript (путем изменения непосредственно attributes, как замечено в ответе). Посмотрите примеры из приведенного ниже фрагмента.

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 { 
 
\t width: 400px; 
 
\t height: 200px; 
 
\t } 
 
.wrapper { 
 
\t background: black; 
 
\t width: 80%; 
 
\t max-width: 400px; 
 
\t margin: 0 auto; 
 
\t color:#fff; 
 
\t fill: #fff; 
 
\t } 
 
text { 
 
\t cursor: pointer; 
 
\t } 
 
.icon:hover{ 
 
\t cursor: pointer; 
 
\t } 
 
.icon:hover .chart{ 
 
\t fill: #FAF; 
 
\t -webkit-animation: color 5s; 
 
\t animation: color 5s forwards alternate; 
 
\t } 
 
@-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;"> 
 
\t <symbol id="chart" viewBox="0 0 1042 1024"> 
 
\t \t <path class="chart" d="M893.78 455.769h145.017v568.231h-145.017v-568.231z" /> 
 
\t \t <path class="chart" d="M671.815 0h145.017v1024h-145.017v-1024z" /> 
 
\t \t <path class="chart bar3" d="M446.89 624.462h145.017v396.578h-145.017v-396.578z" /> 
 
\t \t <path class="chart" d="M224.925 227.884h145.017v796.116h-145.017v-796.116z" /> 
 
\t \t <path class="chart" d="M0 71.029h145.017v952.971h-145.017v-952.971z" /> 
 
\t </symbol> 
 
\t <symbol id="compass" viewBox="0 0 46.6 46.6"> 
 
\t \t <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"/> 
 
\t \t <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"> 
 
\t \t \t <animateTransform attributeName="transform" begin="0s" dur="2s" type="rotate" from="0 22.7 22.7" to="360 22.7 22.7" repeatCount="indefinite" /> 
 
\t \t </path> 
 
\t </symbol> 
 
\t <symbol id="linked-in" viewBox="0 0 1070 1024"> 
 
\t \t <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"/> 
 
\t </symbol> 
 
</svg> 
 

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

Answer 2

Попробуйте это; измените viewBox символа ближе к размеру, в котором он был создан. Я быстро просмотрел внешние размеры путей, а затем принял 100x100.

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

CodePen: http://codepen.io/rfornal-ssi/pen/GgWMvZ

Я только регулировать одну часть, при условии, что вы можете больше вперед с остальной частью кода с этой точки.

UPDATE: на основе тестирования по О.П., мы узнали, что добавить Viewbox к самим <svg> тегу не нужен поскольку <symbol> используются теги.