应用错误收集

在Angular7中使用SVG foreignObject标签

时间：2019-04-12 03:19:49

标签： angular svg

在角度7中，我想使用SVG外对象插入一些HTML代码。但是它不起作用。终端报告一个错误。角度无法识别HTML标签

这是代码

<g id="peizhi" (click)="config()" style="width: 110px; height: 30px" transform="translate(181,0)">
<!--      <a (click)="config()" style="width: 110px;height: 30px">-->
        <use xlink:href="#Rectangle" x="0" y="0"></use>
        <text x="15" y="10" style="fill: rgba(245, 245, 245, 1);width: 24px;height: 27px;" font-size="12px">
          配置
        </text>
        <polygon  points="41 0, 47 0, 44 4" fill="rgba(216, 216, 216, 1)"/>

      <foreignObject width="100" height="50"
                     requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
        <!-- XHTML content goes here -->
        <body xmlns="http://www.w3.org/1999/xhtml">
        <p>Here is a paragraph that requires word wrap</p>
        </body>
      </foreignObject>
<!--      </a>-->
    </g>

这是错误

ERROR Error: Uncaught (in promise): Error: Template parse errors:
':svg:p' is not a known element:
1. If ':svg:p' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("     <!-- XHTML content goes here -->
        <body xmlns="http://www.w3.org/1999/xhtml">
        [ERROR ->]<p>Here is a paragraph that requires word wrap</p>
        </body>
      </foreignObject>
"): ng:///OperateNavModule/EndmonitorNavComponent.html@49:8
':svg:body' is not a known element:

2 个答案:

答案 0 :(得分：1)

<ng-template #nodeTemplate let-node>
  <svg:g class="node">
    <svg:foreignObject>
      <div>Your HTML here</div>
    </svg:foreignObject>
  </svg:g>
</ng-template>

OR

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="100px">
  <rect x="0" y="0" width="100%" height="100%" fill="yellow"/>
  <foreignObject  x="10" y="10" width="100px" height="50px" >
    <xhtml:div xmlns="http://www.w3.org/1999/xhtml" style="background-color: aqua;">
      foreign object
    </xhtml:div> 
  </foreignObject> 
</svg>

像这样，我们可以在角中使用foreigObject

答案 1 :(得分：0)

您需要将xhtml命名空间添加到段落中。像这样：

import pandas as pd
import matplotlib.pyplot as plt
import matplotlib as mpl
mpl.style.use('ggplot')
import seaborn as sns

data="""index,subject,treated_eye,visit_label,visit_date,bcva_OD,bcva_OS,refract_OD,refract_OS
108, 1101,    OD,  Visit 1 - Screening, 2016-01-07,  27.0,   41.0,    + 5 + 0.75 X 27, + 5 + 1.75 X 45
115, 1101,    OD,  Visit 2 - Baseline,  2016-01-25,  35.0,   41.0,    + 5 + 0.75 X 27, + 5.5 + 1.75 X 40
120, 1101,    OD,  Baseline - VA Session 2 ,2016-01-25, 35.0,   41.0,    + 5 + 0.75 X 27, + 5.5 + 1.75 X 40
125, 1101,    OD,  Visit 4 - Day 1 ,2016-02-02, 32.0,   42.0,    + 5 + 0.75 X 27, + 5 + 1.75 X 30
123, 1101,    OD,  Visit 5 - Day 7 ,2016-02-08, 40.0,   43.0,    + 5 + 0.75 X 28, + 5 + 1.75 X 30
111, 1101,    OD,  Visit 6 - Day 14    ,2016-02-16,33.0,   44.0,    + 5 + 0.75 X 27, + 5 + 1.75 X 40
124, 1101,    OD,  Unscheduled ,2016-02-24, 37.0,   44.0,    + 4.5 + 1.25 X 30,   + 5 + 1.75 X 40
118, 1101,    OD,  Visit 7 - Month 1 ,  2016-02-29 , 37.0,   40.0,    + 4.5 + 1.25 X 30,   + 5 + 1.75 X 43
"""

## DataFrame cleanup
df=pd.read_csv(pd.compat.StringIO(data),sep=",",index_col=0)
df_obj = df.select_dtypes(['object'])
df[df_obj.columns] = df_obj.apply(lambda x: x.str.strip())

df['visit_date']=pd.to_datetime(df['visit_date'])

for subject, sub_df in df.groupby(by='subject'):
    mask=(sub_df.visit_label == 'Visit 2 - Baseline')
    bcva_OS_baseline=sub_df['bcva_OS'][mask].values
    bcva_OD_baseline=sub_df['bcva_OD'][mask].values

    fig,ax=plt.subplots()    

    # Plot fellow eye
    ax.plot(sub_df['visit_date'], sub_df['bcva_OS'], marker='^', 
        label='OS (fellow) ', color=sns.xkcd_rgb['pale red'])

    # Plot treated eye
    ax.plot(sub_df['visit_date'], sub_df['bcva_OD'], marker='o',
        label='OD (treated) ', color=sns.xkcd_rgb['denim blue']) 

    # Plot fellow eye
    ax.plot_date(sub_df['visit_date'], sub_df['bcva_OS'], 
        marker='*', markersize=10,
        label='BL (fellow) ', color=sns.xkcd_rgb['light pink'])

    # Plot treated eye
    ax.plot_date(sub_df['visit_date'], sub_df['bcva_OD'], 
        marker='*', markersize=10,
        label='BL (treated) ', color=sns.xkcd_rgb['baby blue'])

    # Plot baseline
    ax.axhline(bcva_OS_baseline,color=sns.xkcd_rgb['pale red'],linestyle="dashed")
    ax.axhline(bcva_OD_baseline,color=sns.xkcd_rgb['denim blue'],linestyle="dashed")

    # Legend the old way
    ax.legend(bbox_to_anchor=(1.05, 1), loc=2, borderaxespad=0)

    # Display each chart separately
    ax.set_title('subject {0}'.format(subject))
    fig.autofmt_xdate()
    plt.tight_layout()
    plt.show()

您可以尝试here。