SVG rendering failure in pdf

[abby-cyber]

On the website, SVG can be rendered normally,

but in pdf, css rendering loses.

Configurations in materials for mkdocs:

plugins:
  - with-pdf:
      cover_subtitle: test     
      cover: true
      back_cover: true
      copyright: Copyright © Abby.huang -  All rights reserved.
      # cover_logo: 'https://cloud-cdn.nebula-graph.com.cn/nebula-for-pdf.png'
      output_path: pdf/abby.pdf

CSS content:

.railroad-diagram-output dt:first-child {
  margin-top: 0
}

.railroad-diagram-output dt:after {
  font-weight: 400;
  content: " ::="
}

.railroad-diagram-output dd {
  margin: 0 0 16px;
  padding: 0 16px;
  overflow-x: auto;
  overflow-y: hidden
}

.railroad-diagram-output path {
  fill: none;
  stroke-width: 1;
  stroke: #0e2336
}

.railroad-diagram-output text {
  font: 10px Verdana, sans-serif;
  text-anchor: middle
}

.railroad-diagram-output rect {
  fill: #b0cbed;
  stroke-width: 1;
  stroke: #0e2336
}

.railroad-diagram-output .start-end {
  fill: #0e2336
}

.railroad-diagram-output .terminal rect {
  fill: #d0e2f3
}

.railroad-diagram-output .terminal text {
  font-weight: 700
}

How can I fix it?