2

Estou usando AngularJS para carregar um elemento, porém não pega o CSS.

A View:

 <svg version="1.1" id="body_1" data-name="body-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 196.5 445.5" style="enable-background:new 0 0 196.5 445.5;" xml:space="preserve">
    <use xlink:href="" class="content-body" ng-href="{{arquivo + '#content_body'}}" /></svg>

No controle a viariável do arquivo:

$scope.arquivo = '/img/body.svg';

O arquivo SVG:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="css/body.css" type="text/css"?>
<svg version="1.1" id="body_1" data-name="body-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 196.5 445.5" style="enable-background:new 0 0 196.5 445.5;" xml:space="preserve">
    <g id="content_body">
        <style type="text/css">
            .clip-path-body-1{clip-path:url(#clip_body_1_4);}
            .body-1{clip-path:url(#clip_body_1);fill:#C4E0F6;}
        </style>
        <g id="Camada_1">
            <g>
                <g>
                    <g>
                        <defs>
                            <rect id="body_1_1" x="-250.5" y="-240.6" width="697.7" height="1241"/>
                        </defs>
                        <clipPath id="body_1_2">
                            <use xlink:href="#body_1_1"  style="overflow:visible;"/>
                        </clipPath>
                    </g>
                </g>
                <g>
                    <defs>
                        <path id="SVGID_3_" d="M168.3,347.8l-1.3-0.6l-8.5-5.9l-6.8-8.3c0,0,4.1-43.6-1.6-68.5l-0.9-9.3c1.1-24-5.6-47.4-11.1-97.6
                            l-5-36.6h0l2.5-70.9l10.8,61c-6,7.7-8.2,16.3-10.6,20.6l1.5,12.8c0,0,10.7-6.4,26.6-29.5c0,0-7.6-66.7-13.5-77.9
                            c-4.7-12.2-11.8-13.2-11.8-13.2l-29.8-6.1c0,0-6-1.1-9.4-1.1c-3.2,0-9.6,1.1-9.6,1.1l-30.3,6.1c0,0-7.1,1-11.8,13.2
                            C41.8,48.3,34.2,115,34.2,115c15.9,23.1,26.4,29.2,26.4,29.2l1.9-12.3c-2.4-4.3-4.7-13.1-10.7-20.8l10.8-61l2.5,70.9h0l-5,36.6
                            c-5.5,50.1-12.1,73.6-11.1,97.6l-0.9,9.3c-5.7,24.9-1.6,68.5-1.6,68.5l-6.8,8.3l-8.5,5.9l-1.3,0.6c-6,3.4,10.7,11.5,14.8,5.9
                            c0,0,6.4-6.8,8.3-8.8c3.7-3.8,3.8-4.6,3.8-4.6c0.9-3-0.9-7.4-0.9-7.4c0-14.4,11.6-36.3,15.8-68.9l2.4-9.1
                            c8.8-28.3,21.5-74.7,21.5-74.7h7c0,0,12.7,46.4,21.5,74.7l2.4,9.1c4.3,32.6,15.8,54.5,15.8,68.9c0,0-1.9,4.4-0.9,7.4
                            c0,0,0,0.9,3.8,4.6c1.9,1.9,8.3,8.8,8.3,8.8C157.6,359.3,174.3,351.2,168.3,347.8"/>
                    </defs>
                    <clipPath id="clip_body_1_4">
                        <use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
                    </clipPath>
                    <g class="clip-path-body-1">
                        <defs>
                            <rect id="body_1_5" x="-250.5" y="-240.6" width="697.7" height="1241"/>
                        </defs>
                        <clipPath id="clip_body_1">
                            <use xlink:href="#body_1_5"  style="overflow:visible;"/>
                        </clipPath>
                        <rect x="19.3" y="1.8" class="body-1" width="159.6" height="363.1"/>
                    </g>
                </g>
                <g>
                    <g>
                        <defs>
                            <rect id="body_1_7" x="-250.5" y="-240.6" width="697.7" height="1241"/>
                        </defs>
                        <clipPath id="body_1_8">
                            <use xlink:href="#body_1_7"  style="overflow:visible;"/>
                        </clipPath>
                    </g>
                </g>
                <g>
                    <g>
                        <defs>
                            <rect id="body_1_9" x="-250.5" y="-240.6" width="697.7" height="1241"/>
                        </defs>
                        <clipPath id="body_1_10">
                            <use xlink:href="#body_1_9"  style="overflow:visible;"/>
                        </clipPath>
                    </g>
                </g>
                <g>
                    <g>
                        <defs>
                            <rect id="body_1_11" x="-250.5" y="-240.6" width="697.7" height="1241"/>
                        </defs>
                        <clipPath id="body_1_12">
                            <use xlink:href="#body_1_11"  style="overflow:visible;"/>
                        </clipPath>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

O CSS que não pega (css/body.css):

.content-body .clip-path-body-1{clip-path:url(#clip_body_1_4);}
.content-body .body-1{clip-path:url(#clip_body_1);fill:#C4E0F6;}

Uma referência de um plunker que funciona o CSS:

Onde estou errando?

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .