我有一个用inkscape创建的svg图像。图像有一个外部css文件,因此可以更改一些图像颜色和其他svg属性。这样行。例如,改变 stroke: red
在css文件中改为黄色,会使图像具有黄色边框(又名笔划)。
我还尝试用js修改颜色。我使用jquery来实现这一点。但这没有任何效果。
问题是为什么css有效而js无效?
function changeColor(fillColor,strokeColor){
console.log("changeColor",fillColor,strokeColor);
let id = "#rect983";
let el = $(id);
if(fillColor){
el.attr("fill", fillColor);
}
if(strokeColor){el.attr("stroke", strokeColor);}
}
# rect983 {
fill:#50574f;
stroke:red;
/*fill:#000000;*/
/* stroke:#000000; */
stroke-opacity:1;
stroke-width:3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<?xml-stylesheet type="text/css" href="logo.css"?>
<svg
width="40px"
height="40px"
viewBox="0 0 79.374999 79.374999"
version="1.1"
id="svg10099"
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
sodipodi:docname="base2.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview10101"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:document-units="mm"
showgrid="true"
inkscape:zoom="2.6934743"
inkscape:cx="182.29244"
inkscape:cy="135.69834"
inkscape:window-width="1920"
inkscape:window-height="1017"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="layer2"
inkscape:snap-bbox="true"
inkscape:snap-intersection-paths="true"
inkscape:object-paths="true"
inkscape:snap-smooth-nodes="true"
inkscape:snap-page="true"
inkscape:bbox-paths="true"
inkscape:bbox-nodes="true"
units="px"
width="300px">
<inkscape:grid
type="xygrid"
id="grid14659"
spacingx="2.6458333"
spacingy="2.6458333" />
</sodipodi:namedview>
<defs
id="defs10096">
<inkscape:path-effect
effect="fillet_chamfer"
id="path-effect8790"
is_visible="true"
lpeversion="1"
satellites_param="F,0,1,1,0,39.148651,0,1 @ F,0,0,1,0,39.148651,0,1 @ F,0,1,1,0,39.148651,0,1 @ F,0,1,1,0,39.148651,0,1"
unit="px"
method="auto"
mode="F"
radius="0"
chamfer_steps="1"
flexible="false"
use_knot_distance="true"
apply_no_radius="true"
apply_with_radius="true"
only_selected="false"
hide_knots="false" />
<linearGradient
id="linearGradient14259"
inkscape:swatch="solid">
<stop
style="stop-color:#1f5615;stop-opacity:0.33725491;"
offset="0"
id="stop14257" />
</linearGradient>
<meshgradient
inkscape:collect="always"
id="meshgradient1073"
gradientUnits="userSpaceOnUse"
x="161.65112"
y="20.370331">
<meshrow
id="meshrow1075">
<meshpatch
id="meshpatch1077">
<stop
path="c 59.9628,0 119.926,0 179.889,0"
style="stop-color:#ffffff;stop-opacity:1"
id="stop1079" />
<stop
path="c 0,66.8409 0,133.682 0,200.523"
style="stop-color:#50574f;stop-opacity:1"
id="stop1081" />
<stop
path="c -59.9629,0 -119.926,0 -179.889,0"
style="stop-color:#ffffff;stop-opacity:1"
id="stop1083" />
<stop
path="c 0,-66.8409 0,-133.682 0,-200.523"
style="stop-color:#50574f;stop-opacity:1"
id="stop1085" />
</meshpatch>
</meshrow>
</meshgradient>
<meshgradient
inkscape:collect="always"
id="meshgradient3117"
gradientUnits="userSpaceOnUse"
x="31.496464"
y="23.677107">
<meshrow
id="meshrow3119">
<meshpatch
id="meshpatch3121">
<stop
path="c 45.0603,0 90.1206,0 135.181,0"
style="stop-color:#ffffff;stop-opacity:1"
id="stop3123" />
<stop
path="c 0,65.7387 0,131.477 0,197.216"
style="stop-color:#50574f;stop-opacity:1"
id="stop3125" />
<stop
path="c -45.0603,0 -90.1206,0 -135.181,0"
style="stop-color:#ffffff;stop-opacity:1"
id="stop3127" />
<stop
path="c 0,-65.7387 0,-131.477 0,-197.216"
style="stop-color:#50574f;stop-opacity:1"
id="stop3129" />
</meshpatch>
</meshrow>
</meshgradient>
</defs>
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="background">
<rect
style="stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:fill markers stroke"
id="rect983"
width="76.43"
height="76.430145"
x="1.5"
y="1.5"
ry="6.4650736" />
</g>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
aria-label="FA"
transform="matrix(0.22470239,0,0,0.3430025,-2.2235368,-1.6895186)"
id="text13011"
style="font-size:270.891px;line-height:1.25;font-family:'Arial Rounded MT Bold';-inkscape-font-specification:'Arial Rounded MT Bold, Normal';letter-spacing:0px;opacity:1;fill-opacity:1;stroke:#020000">
<path
d="M 148.15948,53.967163 H 70.780947 v 49.601627 h 64.680513 q 8.99443,0 13.35937,4.1004 4.49722,3.96813 4.49722,10.71395 0,6.74582 -4.49722,10.71395 -4.49721,3.96813 -13.35937,3.96813 H 70.780947 v 63.88689 q 0,12.16893 -5.555381,18.12112 -5.423111,5.81992 -14.020726,5.81992 -8.729885,0 -14.285267,-5.95219 -5.42311,-5.95219 -5.42311,-17.98885 V 47.750427 q 0,-8.465344 2.513149,-13.756184 2.513148,-5.42311 7.803988,-7.803988 5.423111,-2.513149 13.756183,-2.513149 h 92.589697 q 9.39124,0 13.88845,4.232672 4.62949,4.100401 4.62949,10.846221 0,6.878092 -4.62949,11.110763 -4.49721,4.100401 -13.88845,4.100401 z"
id="path2635"
style="fill:url(#meshgradient3117);fill-opacity:1;stroke-width:4;stroke-miterlimit:4;stroke-dasharray:none"
sodipodi:insensitive="true" />
<path
d="m 299.60978,195.6294 -9.25897,-24.33787 h -78.83352 l -9.25896,24.86695 q -5.42312,14.54981 -9.25897,19.70838 -3.83586,5.02629 -12.56575,5.02629 -7.40717,0 -13.09483,-5.42311 -5.68765,-5.42311 -5.68765,-12.3012 0,-3.96813 1.32271,-8.2008 1.32271,-4.23267 4.36494,-11.77212 L 216.94041,57.273938 q 2.11633,-5.423111 5.02629,-12.962557 3.04224,-7.671718 6.34901,-12.698015 3.43905,-5.026298 8.86216,-8.068531 5.55538,-3.174504 13.62391,-3.174504 8.2008,0 13.62391,3.174504 5.55538,3.042233 8.86216,7.93626 3.43904,4.894026 5.68765,10.581679 2.38088,5.555382 5.9522,14.946622 l 50.65979,125.128354 q 5.95219,14.28527 5.95219,20.76655 0,6.74582 -5.68765,12.43347 -5.55538,5.55538 -13.49164,5.55538 -4.62949,0 -7.93626,-1.71952 -3.30678,-1.58725 -5.55539,-4.36494 -2.2486,-2.90996 -4.89402,-8.72989 -2.51315,-5.95219 -4.36494,-10.4494 z m -77.77535,-53.8343 h 57.9347 L 250.53724,61.771152 Z"
id="path2637"
style="fill:url(#meshgradient1073);fill-opacity:1;stroke-width:4;stroke-miterlimit:4;stroke-dasharray:none"
sodipodi:insensitive="true" />
</g>
</g>
</svg>
<button onclick="changeColor('yellow','black')">change colors</button>
暂无答案!
目前还没有任何答案,快来回答吧!