如何填充插入HTML的SVG图像（悬停时）？

Question

我的HTML有一个引用SVG的对象，以前我已通过inkscape将svg保存为png，但无法读取svg图像的属性。目前，我正在尝试使用css来填充svg大纲中的内容，但不了解出了什么问题。 svg图像未填充在内部，不确定是否有所不同。任何帮助将非常感谢。另外，如果有解决方案，我也可以使用jQuery！

HTML：

<object type="image/svg+xml" data="/img/corby-outline.svg" id="theSVG">
</object>

SVG：

 <svg width="212.28mm" height="148.23mm" version="1.1" viewBox="0 0 212.28 148.23" xmlns="http://www.w3.org/2000/svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(-38.28 -36.197)">
    <path id="outlineSvg" d="m39.037 80.913 37.302 92.538 38.169-15.152 9.9761 25.434 30.796-10.282 1.735 4.8704 8.6749-3.7881-1.3012-4.3293 26.025-7.5762-2.6025-7.5762 26.458-9.1997-14.314-36.258 49.88-16.235-2.1687-5.9527-108 38.963-22.121-51.951 16.482-5.9527 10.844-2.7058 90.219-10.282-10.41-18.399-4.7712 4.3293-6.9399 1.0823-6.9399-3.7881z" fill="transparent" stroke="#f00" stroke-width="1.117"/>
</g>

CSS：

 outlineSvg:hover {
fill: orange;
}

 theSVG:hover {
fill: orange;
 }