I'm using AngularJS to load an element, but it does not grab the 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>
In the file variable control:
$scope.arquivo = '/img/body.svg';
The SVG file:
<?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>
CSS that does not handle (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;}
A reference to a plunker that CSS works:
Where am I going wrong?