Задать вопрос
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg

Как из css задать fill для SVG?

Есть картинка svg сделанная из png в программе inkscape, вот ее код:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="128"
   height="128"
   viewBox="0 0 128 128"
   id="svg2"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="brain.svg">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.7"
     inkscape:cx="-18.339993"
     inkscape:cy="140.26684"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1366"
     inkscape:window-height="706"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     units="px"
     inkscape:showpageshadow="false" />
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-924.36216)">
    <path
       style="fill:#000000"
       d="m 15.275739,1051.5531 c -4.846843,-1.5465 -12.259004,-9.2921 -13.759554,-14.3786 -1.73036571,-5.8657 -1.73036571,-91.41822 0,-97.28377 1.6051202,-5.44101 8.969721,-12.85461 14.37476,-14.47042 5.826785,-1.74186 90.813865,-1.74186 96.640645,0 5.40504,1.61581 12.76963,9.02941 14.37476,14.47042 1.73037,5.86555 1.73037,91.41807 0,97.28377 -1.60513,5.4409 -8.96972,12.8545 -14.37476,14.4703 -5.4854,1.6399 -92.084982,1.5582 -97.255851,-0.092 z m 54.846195,-15.016 c 5.370947,-9.9973 5.173129,-9.867 11.862807,-7.8133 10.567933,3.2447 12.027569,3.2899 14.83806,0.4607 1.920781,-1.9336 2.379073,-3.1709 1.894458,-5.1145 -0.351587,-1.4102 -0.125779,-4.1303 0.501807,-6.0444 0.942814,-2.8758 0.870704,-3.7813 -0.415069,-5.2115 -1.418188,-1.5775 -1.377856,-1.843 0.455149,-2.9953 1.365874,-0.8587 1.813854,-1.8907 1.396034,-3.2159 -0.49666,-1.5753 0.16673,-2.2663 3.44148,-3.5853 2.2312,-0.8988 4.05672,-2.1711 4.05672,-2.8274 0,-0.65632 -2.01484,-4.56572 -4.47743,-8.68749 -4.39348,-7.3536 -5.496541,-11.28612 -3.51204,-12.52077 1.41277,-0.87895 1.21775,-9.13568 -0.356309,-15.08512 -3.257771,-12.31344 -8.944359,-20.1543 -17.717582,-24.4296 -2.440711,-1.18939 -7.86014,-2.64172 -12.04317,-3.2274 -20.566697,-2.8796 -41.73886,7.7233 -47.832542,23.95425 -1.828775,4.8711 -2.080022,7.20846 -1.695331,15.77187 0.494162,11.00036 1.769359,15.05008 7.280958,23.12257 4.558272,6.67619 5.395028,12.64719 2.64829,18.89799 l -2.03452,4.6299 5.386674,1.5764 c 2.993339,0.876 8.838218,4.0216 13.155032,7.0798 9.181005,6.5043 17.35015,11.5251 18.773034,11.5382 0.559816,0.01 2.53688,-2.818 4.39349,-6.2737 z M 39.244159,994.69243 c 0,-0.62328 1.145839,-1.13323 2.54631,-1.13323 3.114849,0 7.300043,-2.09316 9.844713,-4.92371 2.461794,-2.73834 1.605829,-2.66468 -4.352207,0.37458 -8.818124,4.49824 -17.025428,4.2787 -18.530732,-0.49568 -0.923221,-2.92818 -0.261523,-3.3054 3.812116,-2.17314 3.714317,1.0324 19.778734,-0.59528 21.326786,-2.16087 0.453305,-0.45845 -3.218575,-0.55945 -8.159744,-0.22446 -9.969231,0.67586 -17.474028,-0.6902 -20.151075,-3.66798 -1.366514,-1.52004 -1.487103,-2.77804 -0.728081,-7.59585 0.753578,-4.78326 1.250078,-5.7741 2.893367,-5.7741 1.095222,0 2.134442,0.78798 2.320268,1.75931 0.207647,1.08542 -0.277308,1.75934 -1.266019,1.75934 -2.19609,0 -3.045594,2.69767 -1.456492,4.62517 1.168958,1.41788 1.386268,1.36394 2.076918,-0.51547 0.806921,-2.19583 3.272247,-2.81838 4.331115,-1.09371 0.33947,0.55293 1.124183,1.00533 1.743803,1.00533 0.61963,0 -0.139382,-1.3302 -1.686686,-2.95598 -1.703307,-1.7897 -2.577454,-3.57463 -2.215563,-4.52397 0.819738,-2.15042 2.375823,-1.96619 3.650933,0.43224 1.473569,2.77171 6.358804,5.11799 11.048201,5.30624 2.165674,0.0869 3.937594,0.60481 3.937594,1.15081 0,0.54605 0.539297,0.44991 1.198424,-0.21361 1.401084,-1.4104 7.183752,-1.65401 6.332046,-0.26675 -0.332378,0.54137 1.44159,0.86096 4.185465,0.754 4.409732,-0.1719 4.739228,-0.0182 4.449918,2.07635 -0.171845,1.24408 0.165209,2.26199 0.749009,2.26199 0.58381,0 1.061458,-0.6786 1.061458,-1.508 0,-0.8294 0.478959,-1.508 1.06434,-1.508 2.340711,0 4.92777,2.19881 4.92777,4.18823 0,1.86008 -0.423879,2.03758 -3.619255,1.5156 -1.990598,-0.32518 -4.386456,-1.29016 -5.324144,-2.14439 -0.937677,-0.85424 -1.999126,-1.25695 -2.358776,-0.89491 -1.040307,1.04722 -6.679452,0.59323 -8.177557,-0.65838 -0.907649,-0.75828 -1.971892,-0.8203 -3.176496,-0.18508 -0.996347,0.52538 -5.929376,0.84878 -10.962279,0.71866 -7.446681,-0.19253 -9.052024,0.0223 -8.620655,1.15398 0.409199,1.07345 3.179329,1.39099 12.146789,1.39237 14.117081,0.002 19.147403,0.44173 25.408167,2.22013 4.760776,1.35233 4.780248,1.37498 2.200048,2.55841 -3.508835,1.60938 -5.790779,1.50386 -9.874741,-0.45662 -3.825407,-1.83634 -7.569869,-1.22026 -5.779816,0.95097 0.796317,0.9659 0.03677,2.25843 -3.042616,5.17773 -3.311114,3.13891 -5.037705,3.98085 -8.938237,4.35806 -3.195629,0.30914 -4.834387,0.0838 -4.834387,-0.66561 z m 38.390557,-18.70738 c -1.56343,-1.20076 -1.676363,-1.66281 -0.583596,-2.38765 0.874866,-0.5803 0.98778,-1.12721 0.318678,-1.54351 -0.569965,-0.35459 -1.318576,-0.18495 -1.663585,0.37701 -0.34501,0.56195 -1.715726,1.02173 -3.046041,1.02173 -1.758842,0 -2.592871,-0.69843 -3.056994,-2.55993 -0.584208,-2.34315 -0.782754,-2.42827 -2.344699,-1.00532 -2.590028,2.35953 -6.607665,1.92484 -8.860891,-0.95874 -2.180751,-2.79082 -3.701055,-3.3341 -2.813324,-1.00533 0.888332,2.33038 -4.67239,1.92248 -6.852597,-0.50266 -0.994183,-1.10586 -2.27724,-2.01065 -2.851231,-2.01065 -0.639742,0 -0.579841,0.46688 0.154779,1.20639 1.96481,1.97788 1.365554,3.82025 -1.242598,3.82025 -3.243053,0 -7.680979,-3.96793 -9.064579,-8.10461 -1.470774,-4.3973 -3.474664,-5.03798 -3.474664,-1.11091 0,3.31267 -1.546305,4.40926 -4.246278,3.01131 -1.644609,-0.8515 -1.622653,-1.15996 0.366034,-5.14213 3.333584,-6.67519 4.791794,-7.93395 8.29408,-7.1596 2.803437,0.61985 2.92586,0.53657 1.59113,-1.08238 -1.293758,-1.56925 -1.154415,-2.00636 1.32364,-4.15206 1.523282,-1.31901 3.323649,-2.39818 4.000794,-2.39818 0.677145,0 2.990738,-0.90305 5.141325,-2.00679 5.206039,-2.67184 6.215813,-1.56501 4.809772,5.27201 -1.342899,6.52994 -0.572225,8.20568 1.654446,3.59742 1.030062,-2.13178 1.505693,-4.92792 1.235118,-7.26103 -0.405813,-3.49924 -0.259291,-3.76802 1.88466,-3.45725 2.138206,0.30994 2.302144,0.75892 2.043494,5.59664 -0.3082,5.7646 0.450657,9.31762 1.990083,9.31762 0.627596,0 0.739511,-2.57801 0.304727,-7.01968 -0.590514,-6.03275 -0.452559,-7.11029 0.981289,-7.66417 2.162695,-0.83543 3.162874,0.20004 1.795389,1.85873 -0.797393,0.96718 -0.42675,1.92148 1.454019,3.74371 2.017735,1.95493 2.416892,3.11136 1.989346,5.76352 -0.604757,3.75148 0.255769,4.28617 2.103851,1.30723 1.742057,-2.80803 4.326196,-2.51012 8.720589,1.00532 3.595921,2.8767 5.492767,3.7135 5.492767,2.42316 0,-0.32609 -1.011172,-1.42774 -2.247046,-2.44815 -2.234792,-1.84518 -2.236151,-1.86368 -0.249676,-3.3965 2.364248,-1.82429 1.303314,-2.12761 -1.430481,-0.40896 -2.310974,1.45283 -5.060962,-0.35657 -5.060962,-3.32995 0,-1.03815 -0.449405,-1.88755 -0.998685,-1.88755 -0.549279,0 -0.998685,0.85639 -0.998685,1.9031 0,1.04669 -0.674108,2.1635 -1.498027,2.48176 -1.434294,0.55406 -1.922333,-0.41678 -1.57257,-3.1282 0.08916,-0.69117 -0.531709,-1.25666 -1.379699,-1.25666 -1.926505,0 -2.035917,-2.61001 -0.14011,-3.34234 1.765983,-0.68218 5.625571,0.23892 7.586461,1.81055 0.82391,0.66034 3.000062,1.79972 4.835881,2.53193 2.060871,0.82196 3.930705,2.58276 4.887477,4.60248 0.892698,1.88446 2.091268,3.06196 2.827324,2.77763 0.702739,-0.27147 1.826029,0.5378 2.496198,1.79834 0.973605,1.8313 0.959042,2.37897 -0.07247,2.7251 -0.896686,0.30088 -0.642906,0.92966 0.830915,2.05871 1.849004,1.41647 1.964508,1.93856 0.898102,4.05946 -1.606944,3.19595 -3.720507,3.85975 -3.720507,1.1685 0,-1.15194 -0.449406,-2.09444 -0.998685,-2.09444 -0.54927,0 -0.998685,0.8743 -0.998685,1.94291 0,2.15664 -2.82292,3.47329 -5.352067,2.4963 -2.125982,-0.82123 -2.065906,-1.6107 0.358642,-4.71353 2.745699,-3.51381 2.510877,-4.58311 -0.401603,-1.82876 -1.447828,1.3692 -3.328636,2.13624 -4.743749,1.93457 -2.094702,-0.29853 -2.326662,-0.81664 -2.174959,-4.85813 0.143117,-3.81279 -0.01387,-4.23028 -0.998685,-2.65574 -2.867025,4.58389 -4.939626,6.67705 -6.611468,6.67705 -2.51764,0 -4.067244,-2.20875 -3.386917,-4.82763 0.786973,-3.02941 -0.485566,-2.79611 -1.656299,0.30365 -1.186636,3.14184 -5.403207,3.43529 -7.222561,0.50267 -1.577217,-2.54234 -2.39321,-2.54234 -3.053647,0 -0.688982,2.65219 -3.211056,2.55832 -5.123803,-0.19069 -1.879159,-2.70073 -3.168589,-1.7965 -1.612358,1.13069 0.619184,1.16464 0.895444,2.49271 0.613915,2.95125 -0.281518,0.45856 1.752759,0.61469 4.520618,0.34696 4.1371,-0.40017 5.576003,-0.0823 8.087395,1.78685 2.638772,1.96391 3.518576,2.13036 6.458756,1.222 3.873986,-1.19688 7.70798,-0.36877 12.71494,2.74628 3.750176,2.33315 6.816718,2.58659 11.483169,0.94904 1.757833,-0.61685 3.458704,-0.85718 3.779711,-0.53403 1.091826,1.0991 -2.51668,5.36364 -5.640794,6.6663 -2.768675,1.15446 -3.271908,1.08819 -4.555032,-0.59978 -1.395426,-1.8357 -1.463109,-1.82381 -2.074715,0.36439 -0.742984,2.65822 -1.345568,2.77606 -3.953467,0.7731 z"
       id="brain"
       inkscape:connector-curvature="0"
       inkscape:label="#path3347-30" />
  </g>
</svg>

Вопросы:
1. как избавится от transform="translate(0,-924.36216)" ?
2. к какому бы элементу не добавлял класс, не могу изменить fill:#000000 из css для path
3. Я так понял тут в коде много мусора, который теоретически можно убрать?
4. Если хочу получить возможность менять из css надо вставлять в html код svg или можно подключить через <img src="mysvg.svg"/>?
Хотел сделать ей hover и менять заливку при наведении. Только прочитал доки по svg, явно чего-то не понимаю. Буду рад даже намекам. Но лучше совет.
  • Вопрос задан
  • 5818 просмотров
Подписаться 2 Оценить Комментировать
Решения вопроса 1
IonDen
@IonDen
JavaScript developer. IonDen.com
2. Нужно path {fill: #f00 !important;} ибо style имеет больший вес.
3. Зачем?
4. Если хотите интерактивности, то лучше воспользуйтесь D3 для создания svg и взаимодействия с ним.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы