django ckeditor SVG页面分解部分

我正在使用Django 2.2。我正在写一个非常粗糙的CMS，它允许实习生编辑所选页面的内容

这是我的代码：

设置.py models.py views.py test_page.html

{%extends'base.html%}
{%load static%}
{%block content%}
{%autoescape off%}
{{content}}
{%endautoescape%}
{%endblock%}

网页模型的示例内容 这段HTML：

  <div class="d-flex flex-wrap text-center">
    <!-- Counter Pie Chart -->

    <div class="g-mr-40 g-mb-20 g-mb-0--xl">
      <div class="js-pie g-color-purple g-mb-5" data-circles-value="54"
      data-circles-max-value="100" data-circles-bg-color="#d3b6c6" data-circles-fg-color=
      "#9b6bcc" data-circles-radius="30" data-circles-stroke-width="3"
      data-circles-additional-text="%" data-circles-duration="2000"
      data-circles-scroll-animate="true" data-circles-font-size="14" id="hs-pie-1">
        <div class="circles-wrp" style="position: relative; display: inline-block;">
          <div class="circles-text" style=
          "position: absolute; top: 0px; left: 0px; text-align: center; width: 100%; font-size: 14px; height: 60px; line-height: 60px;">
          54%
          </div>
        </div>
      </div>

      <h4 class="h6 g-font-weight-300">Consulting</h4>
    </div><!-- End Counter Pie Chart -->
  </div>

54%
咨询

被ckedit损坏，导致：

  <div class="d-flex flex-wrap text-center">
    <!-- Counter Pie Chart -->

    <div class="g-mb-0--xl g-mb-20 g-mr-40">
      <div class="g-color-purple g-mb-5 js-pie" id="hs-pie-1">
        <div class="circles-wrp" style="display:inline-block; position:relative">
          <div class="circles-text" style=
          "font-size:14px; height:60px; left:0px; line-height:60px; position:absolute; text-align:center; top:0px; width:100%">
          54%
          </div>
        </div>
      </div>

      <h4>Consulting</h4>
    </div>
  </div>

54%
咨询

是什么导致ckedit删除SVG元素，如何解决此问题

def test_page(request):
    from django.template import Context, Template
    from django.http import HttpResponse
    
    from webpage.models import WebPage
    
    page = WebPage.objects.get(breadcrumb='Main/Menu1')
    content = page.content
    
    return render(request, 'test_page.html', { 'content': content})

{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container">
    {% autoescape off %}
    {{ content }}
    {% endautoescape %}        
</div>
{% endblock %}

  <div class="d-flex flex-wrap text-center">
    <!-- Counter Pie Chart -->

    <div class="g-mr-40 g-mb-20 g-mb-0--xl">
      <div class="js-pie g-color-purple g-mb-5" data-circles-value="54"
      data-circles-max-value="100" data-circles-bg-color="#d3b6c6" data-circles-fg-color=
      "#9b6bcc" data-circles-radius="30" data-circles-stroke-width="3"
      data-circles-additional-text="%" data-circles-duration="2000"
      data-circles-scroll-animate="true" data-circles-font-size="14" id="hs-pie-1">
        <div class="circles-wrp" style="position: relative; display: inline-block;">
          <div class="circles-text" style=
          "position: absolute; top: 0px; left: 0px; text-align: center; width: 100%; font-size: 14px; height: 60px; line-height: 60px;">
          54%
          </div>
        </div>
      </div>

      <h4 class="h6 g-font-weight-300">Consulting</h4>
    </div><!-- End Counter Pie Chart -->
  </div>

  <div class="d-flex flex-wrap text-center">
    <!-- Counter Pie Chart -->

    <div class="g-mb-0--xl g-mb-20 g-mr-40">
      <div class="g-color-purple g-mb-5 js-pie" id="hs-pie-1">
        <div class="circles-wrp" style="display:inline-block; position:relative">
          <div class="circles-text" style=
          "font-size:14px; height:60px; left:0px; line-height:60px; position:absolute; text-align:center; top:0px; width:100%">
          54%
          </div>
        </div>
      </div>

      <h4>Consulting</h4>
    </div>
  </div>