Javascript 角度8样式问题
我正在Angular 8中构建应用程序，并在Angular前端显示一个svg图像，该图像是使用Domsanizer从后端生成的。代码工作得非常好，它将svg图像显示到前端。现在的问题是，当svg图像显示在前端时，由于这个原因，我的组件样式（CSS）受到影响。更详细地说，在svg图像加载到前端后，我的导航栏最初是屏幕的全宽，然后导航栏缩小它的大小，并在其左、右和底部添加某种边距 Html:Javascript 角度8样式问题,javascript,html,css,angular,svg,Javascript,Html,Css,Angular,Svg,我正在Angular 8中构建应用程序，并在Angular前端显示一个svg图像，该图像是使用Domsanizer从后端生成的。代码工作得非常好，它将svg图像显示到前端。现在的问题是，当svg图像显示在前端时，由于这个原因，我的组件样式（CSS）受到影响。更详细地说，在svg图像加载到前端后，我的导航栏最初是屏幕的全宽，然后导航栏缩小它的大小，并在其左、右和底部添加某种边距 Html: <div class="svg" [innerHTML]="svg"></div>
<div class="svg" [innerHTML]="svg"></div>
import { Component, OnInit} from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
.....
@Component({......})
export class MyComponent implements OnInit {
svg:SafeHtml;
constructor(private sanitizer: DomSanitizer) { }
ngOnInit() {
this.svg = this.sanitizer.bypassSecurityTrustHtml('SVG CONTENT');
}
}
<html>
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<style>body{ margin:0 100; background:whitesmoke; }</style>
</head>
<body>
<h1></h1>
<svg height="344.16pt" version="1.1" viewbox="0 0 460.8 344.16" width="460.8pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
*{stroke-linecap:butt;stroke-linejoin:round;}
</style>
</defs>
<g id="figure_1">
<g id="patch_1">
<path d="M 0 344.16
L 460.8 344.16
L 460.8 0
L 0 0
z
" style="fill:#ffffff;"></path>
</g>
<g id="axes_1">
<g id="patch_2">
<path d="M 37.15 319.264167
L 450 319.264167
L 450 25.334
L 37.15 25.334
z
" style="fill:#ffffff;"></path>
</g>
<g id="PolyCollection_1">
<path clip-path="url(#p627f3ac1e9)" d="M 63.901402 203.218592
L 63.901402 238.707855
L 71.886896 243.150936
L 79.872389 243.22984
L 87.857882 243.28396
L 95.843375 244.251805
L 103.828868 246.769011
L 111.814362 249.295215
L 119.799855 251.587942
L 127.785348 252.151143
L 135.770841 252.192877
L 143.756335 252.465754
L 151.741828 253.684624
L 159.727321 256.558405
L 167.712814 257.430179
L 175.698308 257.477646
L 183.683801 257.480979
L 191.669294 257.798929
L 199.654787 259.052734
L 207.64028 260.106632
L 215.625774 260.678653
L 223.611267 260.77239
L 231.59676 260.839193
L 239.582253 261.013043
L 247.567747 261.495237
L 255.55324 262.446651
L 263.538733 262.825749
L 271.524226 262.839165
L 279.50972 262.841801
L 287.495213 263.021195
L 295.480706 263.606824
L 303.466199 264.034256
L 311.451692 264.272128
L 319.437186 264.313946
L 327.422679 264.40439
L 335.408172 264.616897
L 343.393665 264.902244
L 351.379159 265.249418
L 359.364652 265.339262
L 367.350145 265.344617
L 375.335638 265.355031
L 383.321132 265.397175
L 391.306625 265.509928
L 399.292118 265.640043
L 407.277611 265.724146
L 415.263104 265.726199
L 423.248598 265.763521
L 431.234091 265.809885
L 431.234091 176.116562
L 431.234091 176.116562
L 423.248598 176.162926
L 415.263104 176.200248
L 407.277611 176.202301
L 399.292118 176.286404
L 391.306625 176.416519
L 383.321132 176.529272
L 375.335638 176.571416
L 367.350145 176.58183
L 359.364652 176.587185
L 351.379159 176.677029
L 343.393665 177.024203
L 335.408172 177.30955
L 327.422679 177.522057
L 319.437186 177.612501
L 311.451692 177.654319
L 303.466199 177.892191
L 295.480706 178.319623
L 287.495213 178.905252
L 279.50972 179.084646
L 271.524226 179.087282
L 263.538733 179.100698
L 255.55324 179.479796
L 247.567747 180.43121
L 239.582253 180.913404
L 231.59676 181.087254
L 223.611267 181.154057
L 215.625774 181.247794
L 207.64028 181.819815
L 199.654787 182.873713
L 191.669294 184.127518
L 183.683801 184.445468
L 175.698308 184.448801
L 167.712814 184.496268
L 159.727321 185.368042
L 151.741828 188.241823
L 143.756335 189.460693
L 135.770841 189.73357
L 127.785348 189.775304
L 119.799855 190.338505
L 111.814362 192.631232
L 103.828868 195.157436
L 95.843375 197.674642
L 87.857882 198.642487
L 79.872389 198.696607
L 71.886896 198.775511
L 63.901402 203.218592
z
" style="fill:#1f77b4;fill-opacity:0.25;"></path>
</g>
<g id="matplotlib.axis_1">
<g id="xtick_1">
<g id="line2d_1">
<defs>
<path d="M 0 0
L 0 3.5
" id="m50ec2796b5" style="stroke:#000000;stroke-width:0.8;"></path>
</defs>
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="55.915909" xlink:href="#m50ec2796b5" y="319.264167"></use>
</g>
</g>
<g id="text_1">
<!-- 0 -->
<defs>
<path d="M 31.78125 66.40625
Q 24.171875 66.40625 20.328125 58.90625
Q 16.5 51.421875 16.5 36.375
Q 16.5 21.390625 20.328125 13.890625
Q 24.171875 6.390625 31.78125 6.390625
Q 39.453125 6.390625 43.28125 13.890625
Q 47.125 21.390625 47.125 36.375
Q 47.125 51.421875 43.28125 58.90625
Q 39.453125 66.40625 31.78125 66.40625
z
M 31.78125 74.21875
Q 44.046875 74.21875 50.515625 64.515625
Q 56.984375 54.828125 56.984375 36.375
Q 56.984375 17.96875 50.515625 8.265625
Q 44.046875 -1.421875 31.78125 -1.421875
Q 19.53125 -1.421875 13.0625 8.265625
Q 6.59375 17.96875 6.59375 36.375
Q 6.59375 54.828125 13.0625 64.515625
Q 19.53125 74.21875 31.78125 74.21875
z
" id="DejaVuSans-48"></path>
</defs>
<g transform="translate(53.370909 332.342917)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-48"></use>
</g>
</g>
</g>
<g id="xtick_2">
<g id="line2d_2">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="135.770841" xlink:href="#m50ec2796b5" y="319.264167"></use>
</g>
</g>
<g id="text_2">
<!-- 10 -->
<defs>
<path d="M 12.40625 8.296875
L 28.515625 8.296875
L 28.515625 63.921875
L 10.984375 60.40625
L 10.984375 69.390625
L 28.421875 72.90625
L 38.28125 72.90625
L 38.28125 8.296875
L 54.390625 8.296875
L 54.390625 0
L 12.40625 0
z
" id="DejaVuSans-49"></path>
</defs>
<g transform="translate(130.680841 332.342917)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-49"></use>
<use x="63.623047" xlink:href="#DejaVuSans-48"></use>
</g>
</g>
</g>
<g id="xtick_3">
<g id="line2d_3">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="215.625774" xlink:href="#m50ec2796b5" y="319.264167"></use>
</g>
</g>
<g id="text_3">
<!-- 20 -->
<defs>
<path d="M 19.1875 8.296875
L 53.609375 8.296875
L 53.609375 0
L 7.328125 0
L 7.328125 8.296875
Q 12.9375 14.109375 22.625 23.890625
Q 32.328125 33.6875 34.8125 36.53125
Q 39.546875 41.84375 41.421875 45.53125
Q 43.3125 49.21875 43.3125 52.78125
Q 43.3125 58.59375 39.234375 62.25
Q 35.15625 65.921875 28.609375 65.921875
Q 23.96875 65.921875 18.8125 64.3125
Q 13.671875 62.703125 7.8125 59.421875
L 7.8125 69.390625
Q 13.765625 71.78125 18.9375 73
Q 24.125 74.21875 28.421875 74.21875
Q 39.75 74.21875 46.484375 68.546875
Q 53.21875 62.890625 53.21875 53.421875
Q 53.21875 48.921875 51.53125 44.890625
Q 49.859375 40.875 45.40625 35.40625
Q 44.1875 33.984375 37.640625 27.21875
Q 31.109375 20.453125 19.1875 8.296875
z
" id="DejaVuSans-50"></path>
</defs>
<g transform="translate(210.535774 332.342917)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-50"></use>
<use x="63.623047" xlink:href="#DejaVuSans-48"></use>
</g>
</g>
</g>
<g id="xtick_4">
<g id="line2d_4">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="295.480706" xlink:href="#m50ec2796b5" y="319.264167"></use>
</g>
</g>
<g id="text_4">
<!-- 30 -->
<defs>
<path d="M 40.578125 39.3125
Q 47.65625 37.796875 51.625 33
Q 55.609375 28.21875 55.609375 21.1875
Q 55.609375 10.40625 48.1875 4.484375
Q 40.765625 -1.421875 27.09375 -1.421875
Q 22.515625 -1.421875 17.65625 -0.515625
Q 12.796875 0.390625 7.625 2.203125
L 7.625 11.71875
Q 11.71875 9.328125 16.59375 8.109375
Q 21.484375 6.890625 26.8125 6.890625
Q 36.078125 6.890625 40.9375 10.546875
Q 45.796875 14.203125 45.796875 21.1875
Q 45.796875 27.640625 41.28125 31.265625
Q 36.765625 34.90625 28.71875 34.90625
L 20.21875 34.90625
L 20.21875 43.015625
L 29.109375 43.015625
Q 36.375 43.015625 40.234375 45.921875
Q 44.09375 48.828125 44.09375 54.296875
Q 44.09375 59.90625 40.109375 62.90625
Q 36.140625 65.921875 28.71875 65.921875
Q 24.65625 65.921875 20.015625 65.03125
Q 15.375 64.15625 9.8125 62.3125
L 9.8125 71.09375
Q 15.4375 72.65625 20.34375 73.4375
Q 25.25 74.21875 29.59375 74.21875
Q 40.828125 74.21875 47.359375 69.109375
Q 53.90625 64.015625 53.90625 55.328125
Q 53.90625 49.265625 50.4375 45.09375
Q 46.96875 40.921875 40.578125 39.3125
z
" id="DejaVuSans-51"></path>
</defs>
<g transform="translate(290.390706 332.342917)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-51"></use>
<use x="63.623047" xlink:href="#DejaVuSans-48"></use>
</g>
</g>
</g>
<g id="xtick_5">
<g id="line2d_5">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="375.335638" xlink:href="#m50ec2796b5" y="319.264167"></use>
</g>
</g>
<g id="text_5">
<!-- 40 -->
<defs>
<path d="M 37.796875 64.3125
L 12.890625 25.390625
L 37.796875 25.390625
z
M 35.203125 72.90625
L 47.609375 72.90625
L 47.609375 25.390625
L 58.015625 25.390625
L 58.015625 17.1875
L 47.609375 17.1875
L 47.609375 0
L 37.796875 0
L 37.796875 17.1875
L 4.890625 17.1875
L 4.890625 26.703125
z
" id="DejaVuSans-52"></path>
</defs>
<g transform="translate(370.245638 332.342917)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-52"></use>
<use x="63.623047" xlink:href="#DejaVuSans-48"></use>
</g>
</g>
</g>
</g>
<g id="matplotlib.axis_2">
<g id="ytick_1">
<g id="line2d_6">
<defs>
<path d="M 0 0
L -3.5 0
" id="m04ebd26a8b" style="stroke:#000000;stroke-width:0.8;"></path>
</defs>
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="293.870728"></use>
</g>
</g>
<g id="text_6">
<!-- −0.4 -->
<defs>
<path d="M 10.59375 35.5
L 73.1875 35.5
L 73.1875 27.203125
L 10.59375 27.203125
z
" id="DejaVuSans-8722"></path>
<path d="M 10.6875 12.40625
L 21 12.40625
L 21 0
L 10.6875 0
z
" id="DejaVuSans-46"></path>
</defs>
<g transform="translate(10.72375 296.910103)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-8722"></use>
<use x="83.789062" xlink:href="#DejaVuSans-48"></use>
<use x="147.412109" xlink:href="#DejaVuSans-46"></use>
<use x="179.199219" xlink:href="#DejaVuSans-52"></use>
</g>
</g>
</g>
<g id="ytick_2">
<g id="line2d_7">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="257.416976"></use>
</g>
</g>
<g id="text_7">
<!-- −0.2 -->
<g transform="translate(10.72375 260.456351)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-8722"></use>
<use x="83.789062" xlink:href="#DejaVuSans-48"></use>
<use x="147.412109" xlink:href="#DejaVuSans-46"></use>
<use x="179.199219" xlink:href="#DejaVuSans-50"></use>
</g>
</g>
</g>
<g id="ytick_3">
<g id="line2d_8">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="220.963224"></use>
</g>
</g>
<g id="text_8">
<!-- 0.0 -->
<g transform="translate(17.4275 224.002599)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-48"></use>
<use x="63.623047" xlink:href="#DejaVuSans-46"></use>
<use x="95.410156" xlink:href="#DejaVuSans-48"></use>
</g>
</g>
</g>
<g id="ytick_4">
<g id="line2d_9">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="184.509471"></use>
</g>
</g>
<g id="text_9">
<!-- 0.2 -->
<g transform="translate(17.4275 187.548846)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-48"></use>
<use x="63.623047" xlink:href="#DejaVuSans-46"></use>
<use x="95.410156" xlink:href="#DejaVuSans-50"></use>
</g>
</g>
</g>
<g id="ytick_5">
<g id="line2d_10">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="148.055719"></use>
</g>
</g>
<g id="text_10">
<!-- 0.4 -->
<g transform="translate(17.4275 151.095094)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-48"></use>
<use x="63.623047" xlink:href="#DejaVuSans-46"></use>
<use x="95.410156" xlink:href="#DejaVuSans-52"></use>
</g>
</g>
</g>
<g id="ytick_6">
<g id="line2d_11">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="111.601967"></use>
</g>
</g>
<g id="text_11">
<!-- 0.6 -->
<defs>
<path d="M 33.015625 40.375
Q 26.375 40.375 22.484375 35.828125
Q 18.609375 31.296875 18.609375 23.390625
Q 18.609375 15.53125 22.484375 10.953125
Q 26.375 6.390625 33.015625 6.390625
Q 39.65625 6.390625 43.53125 10.953125
Q 47.40625 15.53125 47.40625 23.390625
Q 47.40625 31.296875 43.53125 35.828125
Q 39.65625 40.375 33.015625 40.375
z
M 52.59375 71.296875
L 52.59375 62.3125
Q 48.875 64.0625 45.09375 64.984375
Q 41.3125 65.921875 37.59375 65.921875
Q 27.828125 65.921875 22.671875 59.328125
Q 17.53125 52.734375 16.796875 39.40625
Q 19.671875 43.65625 24.015625 45.921875
Q 28.375 48.1875 33.59375 48.1875
Q 44.578125 48.1875 50.953125 41.515625
Q 57.328125 34.859375 57.328125 23.390625
Q 57.328125 12.15625 50.6875 5.359375
Q 44.046875 -1.421875 33.015625 -1.421875
Q 20.359375 -1.421875 13.671875 8.265625
Q 6.984375 17.96875 6.984375 36.375
Q 6.984375 53.65625 15.1875 63.9375
Q 23.390625 74.21875 37.203125 74.21875
Q 40.921875 74.21875 44.703125 73.484375
Q 48.484375 72.75 52.59375 71.296875
z
" id="DejaVuSans-54"></path>
</defs>
<g transform="translate(17.4275 114.641342)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-48"></use>
<use x="63.623047" xlink:href="#DejaVuSans-46"></use>
<use x="95.410156" xlink:href="#DejaVuSans-54"></use>
</g>
</g>
</g>
<g id="ytick_7">
<g id="line2d_12">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="75.148214"></use>
</g>
</g>
<g id="text_12">
<!-- 0.8 -->
<defs>
<path d="M 31.78125 34.625
Q 24.75 34.625 20.71875 30.859375
Q 16.703125 27.09375 16.703125 20.515625
Q 16.703125 13.921875 20.71875 10.15625
Q 24.75 6.390625 31.78125 6.390625
Q 38.8125 6.390625 42.859375 10.171875
Q 46.921875 13.96875 46.921875 20.515625
Q 46.921875 27.09375 42.890625 30.859375
Q 38.875 34.625 31.78125 34.625
z
M 21.921875 38.8125
Q 15.578125 40.375 12.03125 44.71875
Q 8.5 49.078125 8.5 55.328125
Q 8.5 64.0625 14.71875 69.140625
Q 20.953125 74.21875 31.78125 74.21875
Q 42.671875 74.21875 48.875 69.140625
Q 55.078125 64.0625 55.078125 55.328125
Q 55.078125 49.078125 51.53125 44.71875
Q 48 40.375 41.703125 38.8125
Q 48.828125 37.15625 52.796875 32.3125
Q 56.78125 27.484375 56.78125 20.515625
Q 56.78125 9.90625 50.3125 4.234375
Q 43.84375 -1.421875 31.78125 -1.421875
Q 19.734375 -1.421875 13.25 4.234375
Q 6.78125 9.90625 6.78125 20.515625
Q 6.78125 27.484375 10.78125 32.3125
Q 14.796875 37.15625 21.921875 38.8125
z
M 18.3125 54.390625
Q 18.3125 48.734375 21.84375 45.5625
Q 25.390625 42.390625 31.78125 42.390625
Q 38.140625 42.390625 41.71875 45.5625
Q 45.3125 48.734375 45.3125 54.390625
Q 45.3125 60.0625 41.71875 63.234375
Q 38.140625 66.40625 31.78125 66.40625
Q 25.390625 66.40625 21.84375 63.234375
Q 18.3125 60.0625 18.3125 54.390625
z
" id="DejaVuSans-56"></path>
</defs>
<g transform="translate(17.4275 78.187589)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-48"></use>
<use x="63.623047" xlink:href="#DejaVuSans-46"></use>
<use x="95.410156" xlink:href="#DejaVuSans-56"></use>
</g>
</g>
</g>
<g id="ytick_8">
<g id="line2d_13">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="38.694462"></use>
</g>
</g>
<g id="text_13">
<!-- 1.0 -->
<g transform="translate(17.4275 41.733837)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-49"></use>
<use x="63.623047" xlink:href="#DejaVuSans-46"></use>
<use x="95.410156" xlink:href="#DejaVuSans-48"></use>
</g>
</g>
</g>
</g>
<g id="LineCollection_1">
<path clip-path="url(#p627f3ac1e9)" d="M 55.915909 220.963224
L 55.915909 38.694462
" style="fill:none;stroke:#000000;stroke-width:1.5;"></path>
<path clip-path="url(#p627f3ac1e9)" d="M 63.901402 220.963224
L 63
<clippath id="p627f3ac1e9">
<rect height="293.930167" width="412.85" x="37.15" y="25.334"></rect>
</clippath>
</defs>
</svg>
</body>
</html>
正文{margin:0100；背景：whitesmoke；}
*{笔划线帽：对接；笔划线连接：圆形；}
由于svg样式是自动生成的，因此必须覆盖高度和宽度类。检查开发人员选项并应用这些选项。svg的内容是什么。它可能包含
元素是的，它有样式……那么快速修复方法是什么……我不能从svg中删除样式，因为它是自动生成的……从前端我可以做些什么来修复问题吗？用html命名你的类，这样它们就不会与生成的类匹配你所说的重命名类……在svg样式中，大多数是宽度、颜色。。。没有定义类。您可以提供生成的svg代码的内容吗？