SVG替代使用url属性

Question

我有一个svg对象

<svg viewBox="0 0 100 100">
    <defs>
        <linearGradient .... id="color-gradient-1">
            <stop stopColor="..." offset="0%" />
            <stop stopColor="..." offset="100%" />
        </linearGradient>
        ....
    </defs>
    <g id="Button" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
        <circle id="Oval" fill="url(#color-gradient-1)" fillRule="nonzero" cx="20" cy="20" r="20" />
        ...
    </g>
</svg>

我将备忘录对象中的SVG用于按钮：

const MyButton = React.memo<OwnProps>(
   ...
   <div onClick={clickCallback} ...>
       <MyButtonSvg />
   </div>
);

我注意到，每当我单击该按钮时，由于其他页面工具试图检查完全不受我控制的url，我的网站上都会出现奇怪的错误。

是否可以在不使用SVG的url属性的情况下内嵌对象的渐变？另外，生成的SVG语法是否有问题？