SVG 响应式 Angular

Question

我正在为客户开发一个 Web 应用程序，我们都因为 SVG 而感到沮丧。 基本上，我们正在为公司的每个流程创建流程图。他们要求我们遵循已经预先制作的界面。由于我们无法像他们要求的那样找到任何用于创建流程的库，因此我们从头开始创建了所有内容，这很疯狂，但最终 SVG 响应能力“破坏”了整个网站。

如您所见，流程继续向右，但页面正在将其剪切（字面意思），即使使用滚动条也是如此。

基本上，我们在单独的文件中创建了所有流，并将所有文件导入到不同的页面中，因此我们正在创建子级。 我们的准则

 <div class="scroll">
  <svg cdkDrag width="100%" height="350px" xmlns="http://www.w3.org/2000/svg" version="1.1"
    preserveAspectRatio="xMinYMin meet">
    <polyline points="100,10 350,10 350,10 1800,10 1800,320 55,320 55,10 100,10"
      style="fill: none; stroke: #c7c7c7; stroke-width: 1" />

    <!--Preparação de forno -->
    <rect x="100" y="70" rx="10" ry="10" width="130" height="70" fill="rgb(230,230,230)" stroke="#white" [ngClass]="{
        vermelhoPreencher: preparacaoFornoPercentage <= 95,
        verdePreencher: preparacaoFornoPercentage > 95
      }" stroke-width="2" />

    <line x1="230" y1="106" x2="273" y2="106" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <polygon points="278,106 273,104 273,108" style="stroke: rgb(0, 0, 0); stroke-width: 2" />

    <circle cx="230" cy="70" r="15" fill="white" [ngClass]="{
        vermelho: preparacaoFornoPercentage <= 95,
        verde: preparacaoFornoPercentage > 95
      }" stroke="#e6e6e6" />
    <text class="porcentagem" x="218" y="75" [ngClass]="{ cemPorcento: preparacaoFornoPercentage === 100 }"
      font-family="Arial" fill="#000">
      {{
      preparacaoFornoPercentage != "NA"
      ? preparacaoFornoPercentage + "%"
      : "NA"
      }}
    </text>

    <text x="120" y="102" font-family="Arial" font-size="16" fill="#000">
      Preparação de
    </text>
    <text x="148" y="118" font-family="Arial" font-size="16" fill="#000">
      Forno
    </text>

    <!-- Carga -->
    <rect x="280" y="70" width="130" height="70" fill="rgb(230,230,230)" stroke="#white" [ngClass]="{
        vermelhoPreencher: cargaPercentage <= 95,
        verdePreencher: cargaPercentage > 95
      }" stroke-width="2" />

    <line x1="410" y1="106" x2="453" y2="106" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <polygon points="458,106 453,104 453,108" style="stroke: rgb(0, 0, 0); stroke-width: 2" />

    <circle cx="410" cy="70" r="15" fill="white" [ngClass]="{
        vermelho: cargaPercentage <= 95,
        verde: cargaPercentage > 95
      }" stroke="#e6e6e6" />
    <text class="porcentagem" x="398" y="75" [ngClass]="{ cemPorcento: cargaPercentage === 100 }" font-family="Arial"
      fill="#000">
      {{ cargaPercentage != "NA" ? cargaPercentage + "%" : "NA" }}
    </text>

    <text x="327" y="110" font-family="Arial" font-size="16" fill="#000">
      Carga
    </text>

    <!-- Carbonização -->
    <rect x="460" y="70" width="130" height="70" fill="rgb(230,230,230)" stroke="#white" [ngClass]="{
        vermelhoPreencher: carbonizacaoPercentage <= 95,
        verdePreencher: carbonizacaoPercentage > 95
      }" stroke-width="2" />

    <line x1="590" y1="106" x2="633" y2="106" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <polygon points="638,106 633,104 633,108" style="stroke: rgb(0, 0, 0); stroke-width: 2" />

    <circle cx="590" cy="70" r="15" fill="white" [ngClass]="{
        vermelho: carbonizacaoPercentage <= 95,
        verde: carbonizacaoPercentage > 95
      }" stroke="#e6e6e6" />
    <text class="porcentagem" x="578" y="75" [ngClass]="{ cemPorcento: carbonizacaoPercentage === 100 }"
      font-family="Arial" fill="#000">
      {{ carbonizacaoPercentage != "NA" ? carbonizacaoPercentage + "%" : "NA" }}
    </text>

    <text x="483" y="110" font-family="Arial" font-size="16" fill="#000">
      Carbonização
    </text>

    <!-- Dia chuvoso -->
    <polygon points="840,106 740,58 640,106 740,153  " fill="rgb(230,230,230)" style="stroke-width: 2" />

    <text x="728" y="102" font-family="Arial" font-size="16" fill="#000">
      Dia
    </text>
    <text x="714" y="118" font-family="Arial" font-size="16" fill="#000">
      Chuvoso
    </text>

    <polyline points="740,153 740,165" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <text x="727" y="178" font-family="Arial" font-size="16" fill="#000">
      Sim
    </text>
    <polyline points="740,185 740,197" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <polygon points="740,202 738,197 742,197" style="stroke: rgb(0, 0, 0); stroke-width: 2" />

    <polyline points="840,106 850,106" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <text x="854" y="110" font-family="Arial" font-size="16" fill="#000">
      Não
    </text>
    <polyline points="884,106 895,106" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <polygon points="900,106 895,104 895,108" style="stroke: rgb(0, 0, 0); stroke-width: 2" />

    <!-- Cobertura do carvão -->
    <rect x="678" y="205" width="130" height="70" fill="rgb(230,230,230)" stroke="#white" stroke-width="2" />

    <text x="702" y="236" font-family="Arial" font-size="16" fill="#000">
      Cobertura de
    </text>
    <text x="721" y="252" font-family="Arial" font-size="16" fill="#000">
      carvão
    </text>

    <polyline points="808,240 967,240 967,140" fill="none" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <polygon points="967,142 965,147 969,147" style="stroke: rgb(0, 0, 0); stroke-width: 2" />

    <!-- Remontagem -->
    <rect x="902" y="70" width="130" height="70" fill="rgb(230,230,230)" stroke="#white" stroke-width="2" />

    <line x1="1032" y1="106" x2="1075" y2="106" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <polygon points="1080,106 1075,104 1075,108" style="stroke: rgb(0, 0, 0); stroke-width: 2" />

    <text x="925" y="110" font-family="Arial" font-size="16" fill="#000">
      Remontagem
    </text>

    <!-- Coleta -->
    <rect x="1082" y="70" width="130" height="70" fill="rgb(230,230,230)" stroke="#white" [ngClass]="{
        vermelhoPreencher: coletaPercentage <= 95,
        verdePreencher: coletaPercentage > 95
      }" stroke-width="2" />

    <line x1="1212" y1="106" x2="1255" y2="106" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <polygon points="1260,106 1255,104 1255,108" style="stroke: rgb(0, 0, 0); stroke-width: 2" />

    <circle cx="1210" cy="70" r="15" fill="white" [ngClass]="{
        vermelho: coletaPercentage <= 95,
        verde: coletaPercentage > 95
      }" stroke="#e6e6e6" />
    <text class="porcentagem" x="1198" y="75" [ngClass]="{ cemPorcento: coletaPercentage === 100 }" font-family="Arial"
      fill="#000">
      {{ coletaPercentage != "NA" ? coletaPercentage + "%" : "NA" }}
    </text>

    <text x="1127" y="110" font-family="Arial" font-size="16" fill="#000">
      Coleta
    </text>

    <!-- Análise Laboratorial -->
    <rect x="1262" y="70" width="130" height="70" fill="rgb(230,230,230)" stroke="#white" stroke-width="2" />

    <line x1="1392" y1="106" x2="1435" y2="106" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <polygon points="1440,106 1435,104 1435,108" style="stroke: rgb(0, 0, 0); stroke-width: 2" />



    <text x="1303" y="102" font-family="Arial" font-size="16" fill="#000">
      Análise
    </text>
    <text x="1290" y="118" font-family="Arial" font-size="16" fill="#000">
      Laboratorial
    </text>

    <!-- Expedição -->
    <rect x="1442" y="70" width="130" height="70" fill="rgb(230,230,230)" stroke="#white" [ngClass]="{
        vermelhoPreencher: expedicaoPercentage <= 95,
        verdePreencher: expedicaoPercentage > 95
      }" stroke-width="2" />

    <line x1="1572" y1="106" x2="1615" y2="106" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <polygon points="1620,106 1615,104 1615,108" style="stroke: rgb(0, 0, 0); stroke-width: 2" />

    <circle cx="1570" cy="70" r="15" fill="white" [ngClass]="{
        vermelho: expedicaoPercentage <= 95,
        verde: expedicaoPercentage > 95
      }" stroke="#e6e6e6" />
    <text class="porcentagem" x="1558" y="75" [ngClass]="{ cemPorcento: expedicaoPercentage === 100 }"
      font-family="Arial" fill="#000">
      {{ expedicaoPercentage != "NA" ? expedicaoPercentage + "%" : "NA" }}
    </text>

    <text x="1475" y="110" font-family="Arial" font-size="16" fill="#000">
      Expedição
    </text>

    <!-- Usina -->
    <rect x="1622" y="70" rx="100" ry="100" width="130" height="70" fill="rgb(230,230,230)" stroke="#white"
      stroke-width="2" />

    <text x="1667" y="110" font-family="Arial" font-size="16" fill="#000">
      Usina
    </text>
  </svg>
</div>

以及子文档中的 scss：

   :host {

    .scroll{
        overflow-y: hidden;
        width: 100%;
        height: 100%;

        cursor: pointer;

        &::-webkit-scrollbar {
            width: 15px;
            height: 15px;
        }
    
        &::-webkit-scrollbar-track {
            background-color: transparent;
        }
    
        &::-webkit-scrollbar-thumb {
            background-color: #3b0261;
            border-radius: 2px;
            
        }

        &::-webkit-scrollbar-thumb:hover{
            background-color: #78409c;
        } 

    }
    svg {
        width:150%;
        height: 150%;
        max-width: 150%;
        background-color: white;

        &:hover {
            cursor: grab;
        }

        text{
            font-size: 14px;
        }

        .porcentagem{
            font-size: 12px;
        }

        .cemPorcento{
            transform: translateX(-3px);
        }

        .titulo{
            font-size: 22px;
            font-weight: bold;
        }

        .verificacao{
            font-size: 12px;
        }

        .verde{
            stroke: rgb(143,208,78);
        }

        .verdePreencher{
            fill: rgb(143,208,78);
        }

        .vermelho{
            stroke: rgb(241,71,38);
        }

        .vermelhoPreencher{
            fill: rgb(241,71,38);
        }
    }
}    

在我们的父页面中，我们导入并使用 prime ng 中的 p-tab 来显示选项卡中的所有流：

<body>
<div class="container">
    <app-sidebar></app-sidebar>
    <div class="flows">
        <h1 class="regiao-name">{{regiaoNome}}</h1>
        <div class="flow">

            <p-tabView>
                <p-tabPanel header="Viveiro Regional">
                    <a class="detalhamento"
                        href="/detalhamento/macros-processos/{{excelDataTime}}/{{Spreadsheets.spreadsheetsId.regional.viveiro}}?query=!E2:L63&indexValues=5e6e7&name=Viveiro%20Regional">Ver
                        Detalhamento<i class="fa fa-search" aria-hidden="true"></i></a>
                    <app-viveiro-regional class="viveiro"
                        [jardimPercentage]="Spreadsheets.getExcelData(Spreadsheets.spreadsheetsId.regional.viveiro,'!C3') | async"
                        [estaqueamentoPercentage]="Spreadsheets.getExcelData(Spreadsheets.spreadsheetsId.regional.viveiro,'!C5') |async"></app-viveiro-regional>

                </p-tabPanel>
            </p-tabView>



        </div>

        <p-tabView>
            <p-tabPanel header="Silvicultura Regional">
                <a class="detalhamento"
                    href="/detalhamento/macros-processos/{{excelDataTime}}/{{Spreadsheets.spreadsheetsId.regional.silvicultura}}?query=!F2:N70&indexValues=6e7e8&name=Silvicultura%20Regional">Ver
                    Detalhamento<i class="fa fa-search" aria-hidden="true"></i></a>
                <div class="flows">
                    <div class="flow">
                        <app-silvicultura-regional-flow></app-silvicultura-regional-flow>

                    </div>
                </div>
            </p-tabPanel>

            <p-tabPanel header="Silvicultura 1ª Rotação">
                <div class="flows">
                    <div class="flow">
                        <app-silvicultura-regional-flow></app-silvicultura-regional-flow>

                    </div>
                </div>
            </p-tabPanel>

            <p-tabPanel header="Silvicultura 2ª Rotação">
                <div class="flows">
                    <div class="flow">
                        <app-silvicultura-segunda-rotacao></app-silvicultura-segunda-rotacao>

                    </div>
                </div>
            </p-tabPanel>

            <p-tabPanel header="Preparação de mudas">
                <div class="flows">
                    <div class="flow">
                        <app-preparacao-de-mudas [alturaPercentage]="2"
                            [diametroPercentage]="90"></app-preparacao-de-mudas>

                    </div>
                </div>
            </p-tabPanel>
        </p-tabView>


        <p-tabView>
            <p-tabPanel header="Colheita Regional">
                <div class="flows">
                    <div class="flow">
                        <app-colheita-regional
                            [derrubadaPercentage]="Spreadsheets.getExcelData(Spreadsheets.spreadsheetsId.regional.colheita,'!D2')|async"
                            [baldeioPercentage]="Spreadsheets.getExcelData(Spreadsheets.spreadsheetsId.regional.colheita,'!D3')|async"
                            [tracamentoPercentage]="Spreadsheets.getExcelData(Spreadsheets.spreadsheetsId.regional.colheita,'!D4')|async"
                            [transportePercentage]="Spreadsheets.getExcelData(Spreadsheets.spreadsheetsId.regional.colheita,'!D5')|async"></app-colheita-regional>
                    </div>
                </div>
            </p-tabPanel>
            <p-tabPanel header="Colheita Chácara">
                <div class="flows">
                    <div class="flow">
                        <app-colheita-regional></app-colheita-regional>
                    </div>
                </div>
            </p-tabPanel>
            <p-tabPanel header="Colheita Cruz Grande">
                <div class="flows">
                    <div class="flow">
                        <app-colheita-regional></app-colheita-regional>
                    </div>
                </div>
            </p-tabPanel>
            <p-tabPanel header="Colheita São Bento">
                <div class="flows">
                    <div class="flow">
                        <app-colheita-regional></app-colheita-regional>
                    </div>
                </div>
            </p-tabPanel>
        </p-tabView>

        <p-tabView>
            <p-tabPanel header="Carvão Regional">
                <div class="flows">
                    <div class="flow">
                        <app-carvao-regional
                            [preparacaoFornoPercentage]="Spreadsheets.getExcelData(Spreadsheets.spreadsheetsId.itamarandiba.carvao,'!D6')|async"
                            [cargaPercentage]="Spreadsheets.getExcelData(Spreadsheets.spreadsheetsId.itamarandiba.carvao,'!D2')|async"
                            [carbonizacaoPercentage]="Spreadsheets.getExcelData(Spreadsheets.spreadsheetsId.itamarandiba.carvao,'!D3')|async"
                            [coletaPercentage]="Spreadsheets.getExcelData(Spreadsheets.spreadsheetsId.itamarandiba.carvao,'!D8')|async"
                            [analiseLaboratorialPercentage]="Spreadsheets.getExcelData(Spreadsheets.spreadsheetsId.itamarandiba.carvao,'!D7')|async"
                            [expedicaoPercentage]="Spreadsheets.getExcelData(Spreadsheets.spreadsheetsId.itamarandiba.carvao,'!D9')|async"></app-carvao-regional>
                    </div>
                </div>
            </p-tabPanel>
            <p-tabPanel header="Carvão Chácara">
                <div class="flows">
                    <div class="flow">
                        <app-carvao-regional></app-carvao-regional>
                    </div>
                </div>
            </p-tabPanel>
            <p-tabPanel header="Carvão Cruz Grande">
                <div class="flows">
                    <div class="flow">
                        <app-carvao-regional></app-carvao-regional>
                    </div>
                </div>
            </p-tabPanel>
            <p-tabPanel header="Carvão São Bento">
                <div class="flows">
                    <div class="flow">
                        <app-carvao-regional></app-carvao-regional>
                    </div>
                </div>
            </p-tabPanel>
        </p-tabView>
    </div>

</div>

我真的需要帮助让它响应，这样客户就不会让我发疯了。基本上这就是他们想要的：

Answer 1

如果将 svg 元素上的宽度和高度属性替换为 viewBox 属性（类似于

viewBox="0 0 1900 370"

），SVG 将占据父容器宽度的 100%。现在，SVG 的内容就不会溢出了。

如果您需要它的响应速度更快，您可以像对其他图像那样设置 SVG 样式。

<svg cdkDrag viewBox="0 0 1900 370" xmlns="http://www.w3.org/2000/svg" version="1.1"
    preserveAspectRatio="xMinYMin meet">
    <polyline points="100,10 350,10 350,10 1800,10 1800,320 55,320 55,10 100,10"
      style="fill: none; stroke: #c7c7c7; stroke-width: 1" />

    <!--Preparação de forno -->
    <rect x="100" y="70" rx="10" ry="10" width="130" height="70" fill="rgb(230,230,230)" stroke="#white" [ngClass]="{
        vermelhoPreencher: preparacaoFornoPercentage <= 95,
        verdePreencher: preparacaoFornoPercentage > 95
      }" stroke-width="2" />

    <line x1="230" y1="106" x2="273" y2="106" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <polygon points="278,106 273,104 273,108" style="stroke: rgb(0, 0, 0); stroke-width: 2" />

    <circle cx="230" cy="70" r="15" fill="white" [ngClass]="{
        vermelho: preparacaoFornoPercentage <= 95,
        verde: preparacaoFornoPercentage > 95
      }" stroke="#e6e6e6" />
    <text class="porcentagem" x="218" y="75" [ngClass]="{ cemPorcento: preparacaoFornoPercentage === 100 }"
      font-family="Arial" fill="#000">test</text>

    <text x="120" y="102" font-family="Arial" font-size="16" fill="#000">
      Preparação de
    </text>
    <text x="148" y="118" font-family="Arial" font-size="16" fill="#000">
      Forno
    </text>

    <!-- Carga -->
    <rect x="280" y="70" width="130" height="70" fill="rgb(230,230,230)" stroke="#white" [ngClass]="{
        vermelhoPreencher: cargaPercentage <= 95,
        verdePreencher: cargaPercentage > 95
      }" stroke-width="2" />

    <line x1="410" y1="106" x2="453" y2="106" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <polygon points="458,106 453,104 453,108" style="stroke: rgb(0, 0, 0); stroke-width: 2" />

    <circle cx="410" cy="70" r="15" fill="white" [ngClass]="{
        vermelho: cargaPercentage <= 95,
        verde: cargaPercentage > 95
      }" stroke="#e6e6e6" />
    <text class="porcentagem" x="398" y="75" [ngClass]="{ cemPorcento: cargaPercentage === 100 }" font-family="Arial"
      fill="#000">test</text>

    <text x="327" y="110" font-family="Arial" font-size="16" fill="#000">
      Carga
    </text>

    <!-- Carbonização -->
    <rect x="460" y="70" width="130" height="70" fill="rgb(230,230,230)" stroke="#white" [ngClass]="{
        vermelhoPreencher: carbonizacaoPercentage <= 95,
        verdePreencher: carbonizacaoPercentage > 95
      }" stroke-width="2" />

    <line x1="590" y1="106" x2="633" y2="106" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <polygon points="638,106 633,104 633,108" style="stroke: rgb(0, 0, 0); stroke-width: 2" />

    <circle cx="590" cy="70" r="15" fill="white" [ngClass]="{
        vermelho: carbonizacaoPercentage <= 95,
        verde: carbonizacaoPercentage > 95
      }" stroke="#e6e6e6" />
    <text class="porcentagem" x="578" y="75" [ngClass]="{ cemPorcento: carbonizacaoPercentage === 100 }"
      font-family="Arial" fill="#000">test</text>

    <text x="483" y="110" font-family="Arial" font-size="16" fill="#000">
      Carbonização
    </text>

    <!-- Dia chuvoso -->
    <polygon points="840,106 740,58 640,106 740,153  " fill="rgb(230,230,230)" style="stroke-width: 2" />

    <text x="728" y="102" font-family="Arial" font-size="16" fill="#000">
      Dia
    </text>
    <text x="714" y="118" font-family="Arial" font-size="16" fill="#000">
      Chuvoso
    </text>

    <polyline points="740,153 740,165" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <text x="727" y="178" font-family="Arial" font-size="16" fill="#000">
      Sim
    </text>
    <polyline points="740,185 740,197" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <polygon points="740,202 738,197 742,197" style="stroke: rgb(0, 0, 0); stroke-width: 2" />

    <polyline points="840,106 850,106" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <text x="854" y="110" font-family="Arial" font-size="16" fill="#000">
      Não
    </text>
    <polyline points="884,106 895,106" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <polygon points="900,106 895,104 895,108" style="stroke: rgb(0, 0, 0); stroke-width: 2" />

    <!-- Cobertura do carvão -->
    <rect x="678" y="205" width="130" height="70" fill="rgb(230,230,230)" stroke="#white" stroke-width="2" />

    <text x="702" y="236" font-family="Arial" font-size="16" fill="#000">
      Cobertura de
    </text>
    <text x="721" y="252" font-family="Arial" font-size="16" fill="#000">
      carvão
    </text>

    <polyline points="808,240 967,240 967,140" fill="none" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <polygon points="967,142 965,147 969,147" style="stroke: rgb(0, 0, 0); stroke-width: 2" />

    <!-- Remontagem -->
    <rect x="902" y="70" width="130" height="70" fill="rgb(230,230,230)" stroke="#white" stroke-width="2" />

    <line x1="1032" y1="106" x2="1075" y2="106" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <polygon points="1080,106 1075,104 1075,108" style="stroke: rgb(0, 0, 0); stroke-width: 2" />

    <text x="925" y="110" font-family="Arial" font-size="16" fill="#000">
      Remontagem
    </text>

    <!-- Coleta -->
    <rect x="1082" y="70" width="130" height="70" fill="rgb(230,230,230)" stroke="#white" [ngClass]="{
        vermelhoPreencher: coletaPercentage <= 95,
        verdePreencher: coletaPercentage > 95
      }" stroke-width="2" />

    <line x1="1212" y1="106" x2="1255" y2="106" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <polygon points="1260,106 1255,104 1255,108" style="stroke: rgb(0, 0, 0); stroke-width: 2" />

    <circle cx="1210" cy="70" r="15" fill="white" [ngClass]="{
        vermelho: coletaPercentage <= 95,
        verde: coletaPercentage > 95
      }" stroke="#e6e6e6" />
    <text class="porcentagem" x="1198" y="75" [ngClass]="{ cemPorcento: coletaPercentage === 100 }" font-family="Arial"
      fill="#000">
      test
    </text>

    <text x="1127" y="110" font-family="Arial" font-size="16" fill="#000">
      Coleta
    </text>

    <!-- Análise Laboratorial -->
    <rect x="1262" y="70" width="130" height="70" fill="rgb(230,230,230)" stroke="#white" stroke-width="2" />

    <line x1="1392" y1="106" x2="1435" y2="106" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <polygon points="1440,106 1435,104 1435,108" style="stroke: rgb(0, 0, 0); stroke-width: 2" />



    <text x="1303" y="102" font-family="Arial" font-size="16" fill="#000">
      Análise
    </text>
    <text x="1290" y="118" font-family="Arial" font-size="16" fill="#000">
      Laboratorial
    </text>

    <!-- Expedição -->
    <rect x="1442" y="70" width="130" height="70" fill="rgb(230,230,230)" stroke="#white" [ngClass]="{
        vermelhoPreencher: expedicaoPercentage <= 95,
        verdePreencher: expedicaoPercentage > 95
      }" stroke-width="2" />

    <line x1="1572" y1="106" x2="1615" y2="106" style="stroke: rgb(0, 0, 0); stroke-width: 1" />
    <polygon points="1620,106 1615,104 1615,108" style="stroke: rgb(0, 0, 0); stroke-width: 2" />

    <circle cx="1570" cy="70" r="15" fill="white" [ngClass]="{
        vermelho: expedicaoPercentage <= 95,
        verde: expedicaoPercentage > 95
      }" stroke="#e6e6e6" />
    <text class="porcentagem" x="1558" y="75" [ngClass]="{ cemPorcento: expedicaoPercentage === 100 }"
      font-family="Arial" fill="#000">
      test
    </text>

    <text x="1475" y="110" font-family="Arial" font-size="16" fill="#000">
      Expedição
    </text>

    <!-- Usina -->
    <rect x="1622" y="70" rx="100" ry="100" width="130" height="70" fill="rgb(230,230,230)" stroke="#white"
      stroke-width="2" />

    <text x="1667" y="110" font-family="Arial" font-size="16" fill="#000">
      Usina
    </text>
  </svg>