日常记录关于svg出现的问题

svg有两种定义颜色样式的方法

一、使用<style></style>

例如格式：

<style>
    .cls-1{fill:url(#master_svg0_469_05201);}
    .cls-2{fill:url(#master_svg3_469_09527);}
    .cls-3{fill:url(#master_svg5_469_11596);}
    .cls-4{fill:url(#master_svg7_469_09445);}
    .cls-5{fill:url(#master_svg9_469_09201);}
</style>

注：cls-1是元素对应的类名，master_svg0_469_05201是<defs></defs>中定义的渐变色等的id名称，这样可以定义。

二、直接在元素本身里写上fill="url(#master_svg0_469_5042)"

直接在标签里加

<path d="M750 5C750 2.2385762508460325 752.238576250846 0 755 0L1120 0C1122.761423749154 0 1125 2.2385762508460334 1125 5L1125 34C1125 34 1125 34 1125 34L750 34C750 34 750 34 750 34Z"
      fill="url(#master_svg1_517_2506)" fill-opacity="1"/>

三、遇到的问题

有时候元素本身有fill="url(#master_svg0_469_5042)"定义会失效，给它加个<style>标签就可以实现自身样式，加入的<style>对不上，但是它确实能让元素在网页中正确显示自己的样式