SVG Help with updating displayed text

Maybe you can help I have an icon I want to reuse over and over again it looks like a file with a banner on it which is a text element of the svg which I want to update based on the type of file I want to represnt in the call out. I found a good way to replace the colors with variables set in CSS, that part is working fine. I have a text elemnt that I want to update that displays “.COM” or “.YAML”. I cant seem to find a way to do that within the CSS. I even tried making the text into a path and tried to replace the path of an element that would look like “.COM” but I couldnt get that work work either

Here is the SVG that I assigned to a variable --filetype-standard-icon in the :root section of my css file

<svg width="280" height="280" version="1.1" viewBox="0 0 280 280" xmlns="http://www.w3.org/2000/svg">
 <g>
  <g>
   <path d="m63.54 20.589h112.08l23.746 24.711 24.415 25.727v181.29a12 12 135 0 1-12 12h-148.24a12 12 45 0 1-12-12v-219.73a12 12 135 0 1 12-12z" fill="#e0e0e0" stroke="#2db896" stroke-width="8.2255"/>
   <path d="m44.793 163.6h185.78a8 8 45 0 1 8 8v63.966h-201.78v-63.966a8 8 135 0 1 8-8z" fill="#2db896" stroke="#15896e" stroke-width="8"/>
   <path d="m173.83 16.476h3.6l27.826 28.824 22.637 24.12v3.5153h-54.063z" fill="#15896e" stroke-miterlimit="0" stroke-width="0"/>
   <path d="m227.9 239.57v9.8983l14.68-9.8983zm-180.47 0v9.9272l-14.634-9.9272z" fill="#5ddfba" stroke-miterlimit="0" stroke-width="0"/>
   <path d="m69.933 94.643h136.2a3 3 45 0 1 3 3v0.71065a3 3 135 0 1-3 3h-136.2a3 3 45 0 1-3-3v-0.71065a3 3 135 0 1 3-3zm0-15.793h136.2a3 3 0 0 1 3 3v0.71065a3 3 0 0 1-3 3h-136.2a3 3 0 0 1-3-3v-0.71065a3 3 0 0 1 3-3zm0-15.793h89.337a3 3 0 0 1 3 3v0.71065a3 3 0 0 1-3 3h-89.337a3 3 0 0 1-3-3v-0.71065a3 3 0 0 1 3-3zm0 78.966h136.2a3 3 0 0 1 3 3v0.71064a3 3 0 0 1-3 3h-136.2a3 3 0 0 1-3-3v-0.71064a3 3 0 0 1 3-3zm0-15.793h136.2a3 3 0 0 1 3 3v0.71064a3 3 0 0 1-3 3h-136.2a3 3 0 0 1-3-3v-0.71064a3 3 0 0 1 3-3zm0-15.793h136.2a3 3 0 0 1 3 3v0.71064a3 3 0 0 1-3 3h-136.2a3 3 0 0 1-3-3v-0.71064a3 3 0 0 1 3-3zm0-63.173h89.337a3 3 0 0 1 3 3v0.71065a3 3 0 0 1-3 3h-89.337a3 3 0 0 1-3-3v-0.71065a3 3 0 0 1 3-3z" fill="#15896e"/>
  </g>
  <text x="137.09972" y="228.64838" display="none" fill="#ffffff" font-family="Calibri" font-size="92px" font-weight="bold" stroke="#15896e" stroke-linecap="square" stroke-miterlimit="0" stroke-width="0" xml:space="preserve"><tspan x="137.09972" y="228.64838" font-size="92px" text-align="center" text-anchor="middle">COM</tspan></text>
  <g fill="#fff" stroke="#15896e" stroke-linecap="square" stroke-miterlimit="0" stroke-width="0" aria-label="COM">
   <path d="m226.09 227.03q0 0.44922-0.26953 0.80859-0.22461 0.35938-0.89844 0.58399-0.6289 0.22461-1.707 0.35937-1.0781 0.13477-2.7402 0.13477-1.6172 0-2.6953-0.13477-1.0781-0.13476-1.707-0.35937-0.6289-0.22461-0.89844-0.58399-0.26953-0.35937-0.26953-0.80859v-47.303h-0.0898l-16.846 47.258q-0.17969 0.58398-0.58399 0.98828-0.40429 0.35937-1.123 0.58398-0.67383 0.22461-1.752 0.26953-1.0781 0.0899-2.6055 0.0899-1.5273 0-2.6055-0.13477-1.0781-0.0898-1.7969-0.31445-0.67383-0.26953-1.0781-0.62891-0.40429-0.35937-0.53906-0.85351l-16.262-47.258h-0.0898v47.303q0 0.44922-0.26953 0.80859-0.22461 0.35938-0.89844 0.58399t-1.752 0.35937q-1.0332 0.13477-2.6953 0.13477-1.6172 0-2.6953-0.13477-1.0781-0.13476-1.752-0.35937-0.62891-0.22461-0.89844-0.58399-0.22461-0.35937-0.22461-0.80859v-51.795q0-2.291 1.2129-3.5039t3.2344-1.2129h7.7266q2.0664 0 3.5488 0.35938 1.4824 0.31445 2.5606 1.123 1.0781 0.76367 1.7969 2.0664 0.71875 1.2578 1.2578 3.1445l12.578 34.635h0.17969l13.027-34.545q0.58398-1.8867 1.2578-3.1894 0.71875-1.3027 1.6172-2.1113 0.94336-0.80859 2.2012-1.123 1.2578-0.35938 2.9199-0.35938h7.9512q1.2129 0 2.0664 0.31445 0.89844 0.31446 1.4375 0.94336 0.58399 0.58399 0.85352 1.4824 0.31445 0.85352 0.31445 1.9766zm-77.67-28.121q0 7.2324-1.7969 12.938-1.7969 5.7051-5.3457 9.7031-3.5488 3.9531-8.8047 6.0644-5.2109 2.0664-12.084 2.0664-6.7832 0-11.859-1.752-5.0312-1.7969-8.4004-5.4356-3.3691-3.6387-5.0762-9.2539-1.6621-5.6152-1.6621-13.297 0-7.0527 1.7969-12.668 1.7969-5.6602 5.3457-9.6133 3.5488-3.9531 8.7598-6.0644 5.2558-2.1113 12.174-2.1113 6.6035 0 11.635 1.752 5.0762 1.752 8.4453 5.3906 3.4141 3.6387 5.1211 9.209 1.752 5.5254 1.752 13.072zm-12.398 0.6289q0-4.582-0.71875-8.3106-0.71875-3.7734-2.4707-6.4238-1.707-2.6953-4.582-4.1328-2.875-1.4824-7.1875-1.4824-4.3574 0-7.2774 1.6621-2.9199 1.6172-4.7168 4.3574-1.7969 2.7402-2.5606 6.4238-0.71875 3.6387-0.71875 7.7266 0 4.7617 0.71875 8.5801 0.71875 3.7734 2.4258 6.4688t4.582 4.1328q2.875 1.3926 7.2324 1.3926 4.3574 0 7.2774-1.6172 2.9199-1.6172 4.7168-4.4024 1.7969-2.7852 2.5156-6.4688 0.76367-3.7285 0.76367-7.9062zm-47.707 20.305q0 1.123-0.08984 1.9316-0.04492 0.76367-0.17969 1.3477-0.13477 0.53906-0.35938 0.94336-0.22461 0.40429-0.71875 0.94335-0.49414 0.49415-1.9316 1.3027-1.3926 0.80859-3.459 1.5723-2.0215 0.71875-4.6719 1.2129-2.6055 0.49414-5.6602 0.49414-5.9746 0-10.781-1.8418-4.8066-1.8418-8.1758-5.4805-3.3691-3.6836-5.166-9.1641t-1.7969-12.758q0-7.4121 1.9766-13.162 1.9766-5.75 5.5254-9.6582 3.5488-3.9082 8.4902-5.9297 4.9863-2.0215 10.961-2.0215 2.4258 0 4.6719 0.4043 2.2461 0.40429 4.1328 1.0781 1.9316 0.62891 3.459 1.4824 1.5273 0.85352 2.1113 1.4824 0.62891 0.58398 0.85352 0.98828 0.22461 0.40429 0.35938 1.0332 0.13477 0.62891 0.17969 1.4824 0.08984 0.85352 0.08984 2.1113 0 1.3477-0.08984 2.291t-0.31445 1.5273q-0.22461 0.58398-0.53906 0.85352-0.31445 0.26953-0.71875 0.26953-0.67383 0-1.707-0.76367-1.0332-0.8086-2.6953-1.752-1.6172-0.98828-3.9082-1.752-2.2461-0.80859-5.3906-0.80859-3.459 0-6.1992 1.4375-2.6953 1.3926-4.627 4.043-1.8867 2.6055-2.875 6.334-0.98828 3.7285-0.98828 8.4004 0 5.1211 1.0332 8.8945 1.0781 3.7285 3.0098 6.1543 1.9766 2.4258 4.7168 3.6387 2.7852 1.168 6.2441 1.168 3.1445 0 5.4355-0.71875 2.291-0.76367 3.9082-1.6621 1.6621-0.89844 2.6953-1.6172 1.0781-0.71875 1.6621-0.71875 0.44922 0 0.71875 0.17969t0.44922 0.71875q0.17969 0.53906 0.26953 1.5273 0.08984 0.94336 0.08984 2.5606z"/>
  </g>
 </g>
</svg>

I either want to replace the .COM in the tspan text value or I converted the text to a path and I want to set the path d value (the last one in this example after the text section) variable or some other way to modify it.

The point is I dont want to keep reuseing hte same SVG text in my CSS when I can control the colors with variables I just want to do the same for the text part if its a path or actual text element

:root {
	--filetype-standard-icon: SVG_VALUE_ABOVE
}
.callout[data-callout="file-type-com"] {
	--callout-title-color: 9, 119, 230; 
	--callout-color: 9, 119, 230; 
	--FileType-LightColor: #5ddfba;
	--FileType-MiddleColor: #2db896;
	--FileType-DarkColor: #15896e;
	--FileType-PageColor: #ffffff;
	--FileType-TextColor: #ffffff;
	--FileType-Text: path("m54.164 34.936a20.945 20.045 0 0 1-20.945 20.045 20.945 20.045 0 0 1-20.945-20.045 20.945 20.045 0 0 1 20.945-20.045 20.945 20.045 0 0 1 20.945 20.045z");
	--callout-icon: var(--filetype-standard-icon);
	}
}

The --FileType-Text can be either TEXTVALUE or Just the d part of the path element like in the example above

I even tried adding a embedded style tag but the text isnt rendering

<svg width="280" height="280" version="1.1" viewBox="0 0 280 280" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
	.svgtext-filetype-extention:after {
		content: 'COM';
	}
	#changeme:before {
		content: 'me';
}
</style> 
 <g>
  <g>
   <path d="m63.54 20.589h112.08l23.746 24.711 24.415 25.727v181.29a12 12 135 0 1-12 12h-148.24a12 12 45 0 1-12-12v-219.73a12 12 135 0 1 12-12z" fill="#e0e0e0" stroke="#2db896" stroke-width="8.2255"/>
   <path d="m44.793 163.6h185.78a8 8 45 0 1 8 8v63.966h-201.78v-63.966a8 8 135 0 1 8-8z" fill="#2db896" stroke="#15896e" stroke-width="8"/>
   <path d="m173.83 16.476h3.6l27.826 28.824 22.637 24.12v3.5153h-54.063z" fill="#15896e" stroke-miterlimit="0" stroke-width="0"/>
   <path d="m227.9 239.57v9.8983l14.68-9.8983zm-180.47 0v9.9272l-14.634-9.9272z" fill="#5ddfba" stroke-miterlimit="0" stroke-width="0"/>
   <path d="m69.933 94.643h136.2a3 3 45 0 1 3 3v0.71065a3 3 135 0 1-3 3h-136.2a3 3 45 0 1-3-3v-0.71065a3 3 135 0 1 3-3zm0-15.793h136.2a3 3 0 0 1 3 3v0.71065a3 3 0 0 1-3 3h-136.2a3 3 0 0 1-3-3v-0.71065a3 3 0 0 1 3-3zm0-15.793h89.337a3 3 0 0 1 3 3v0.71065a3 3 0 0 1-3 3h-89.337a3 3 0 0 1-3-3v-0.71065a3 3 0 0 1 3-3zm0 78.966h136.2a3 3 0 0 1 3 3v0.71064a3 3 0 0 1-3 3h-136.2a3 3 0 0 1-3-3v-0.71064a3 3 0 0 1 3-3zm0-15.793h136.2a3 3 0 0 1 3 3v0.71064a3 3 0 0 1-3 3h-136.2a3 3 0 0 1-3-3v-0.71064a3 3 0 0 1 3-3zm0-15.793h136.2a3 3 0 0 1 3 3v0.71064a3 3 0 0 1-3 3h-136.2a3 3 0 0 1-3-3v-0.71064a3 3 0 0 1 3-3zm0-63.173h89.337a3 3 0 0 1 3 3v0.71065a3 3 0 0 1-3 3h-89.337a3 3 0 0 1-3-3v-0.71065a3 3 0 0 1 3-3z" fill="#15896e"/>
  </g>

  <text id="changeme" display="inline" x="137.09972" y="228.64838" fill="#ffffff" font-family="Calibri" font-size="92px" font-weight="bold" stroke="#15896e" stroke-linecap="square" stroke-miterlimit="0" stroke-width="0" xml:space="preserve"><tspan class="svgtext-filetype-extention" x="137.09972" y="228.64838" font-size="92px" text-align="center" text-anchor="middle" >r</tspan></text>
  <g display="inline" fill="#fff" stroke="#15896e" stroke-linecap="square" stroke-miterlimit="0" stroke-width="0" aria-label="COM">
   <path display="none" d="m226.09 227.03q0 0.44922-0.26953 0.80859-0.22461 0.35938-0.89844 0.58399-0.6289 0.22461-1.707 0.35937-1.0781 0.13477-2.7402 0.13477-1.6172 0-2.6953-0.13477-1.0781-0.13476-1.707-0.35937-0.6289-0.22461-0.89844-0.58399-0.26953-0.35937-0.26953-0.80859v-47.303h-0.0898l-16.846 47.258q-0.17969 0.58398-0.58399 0.98828-0.40429 0.35937-1.123 0.58398-0.67383 0.22461-1.752 0.26953-1.0781 0.0899-2.6055 0.0899-1.5273 0-2.6055-0.13477-1.0781-0.0898-1.7969-0.31445-0.67383-0.26953-1.0781-0.62891-0.40429-0.35937-0.53906-0.85351l-16.262-47.258h-0.0898v47.303q0 0.44922-0.26953 0.80859-0.22461 0.35938-0.89844 0.58399t-1.752 0.35937q-1.0332 0.13477-2.6953 0.13477-1.6172 0-2.6953-0.13477-1.0781-0.13476-1.752-0.35937-0.62891-0.22461-0.89844-0.58399-0.22461-0.35937-0.22461-0.80859v-51.795q0-2.291 1.2129-3.5039t3.2344-1.2129h7.7266q2.0664 0 3.5488 0.35938 1.4824 0.31445 2.5606 1.123 1.0781 0.76367 1.7969 2.0664 0.71875 1.2578 1.2578 3.1445l12.578 34.635h0.17969l13.027-34.545q0.58398-1.8867 1.2578-3.1894 0.71875-1.3027 1.6172-2.1113 0.94336-0.80859 2.2012-1.123 1.2578-0.35938 2.9199-0.35938h7.9512q1.2129 0 2.0664 0.31445 0.89844 0.31446 1.4375 0.94336 0.58399 0.58399 0.85352 1.4824 0.31445 0.85352 0.31445 1.9766zm-77.67-28.121q0 7.2324-1.7969 12.938-1.7969 5.7051-5.3457 9.7031-3.5488 3.9531-8.8047 6.0644-5.2109 2.0664-12.084 2.0664-6.7832 0-11.859-1.752-5.0312-1.7969-8.4004-5.4356-3.3691-3.6387-5.0762-9.2539-1.6621-5.6152-1.6621-13.297 0-7.0527 1.7969-12.668 1.7969-5.6602 5.3457-9.6133 3.5488-3.9531 8.7598-6.0644 5.2558-2.1113 12.174-2.1113 6.6035 0 11.635 1.752 5.0762 1.752 8.4453 5.3906 3.4141 3.6387 5.1211 9.209 1.752 5.5254 1.752 13.072zm-12.398 0.6289q0-4.582-0.71875-8.3106-0.71875-3.7734-2.4707-6.4238-1.707-2.6953-4.582-4.1328-2.875-1.4824-7.1875-1.4824-4.3574 0-7.2774 1.6621-2.9199 1.6172-4.7168 4.3574-1.7969 2.7402-2.5606 6.4238-0.71875 3.6387-0.71875 7.7266 0 4.7617 0.71875 8.5801 0.71875 3.7734 2.4258 6.4688t4.582 4.1328q2.875 1.3926 7.2324 1.3926 4.3574 0 7.2774-1.6172 2.9199-1.6172 4.7168-4.4024 1.7969-2.7852 2.5156-6.4688 0.76367-3.7285 0.76367-7.9062zm-47.707 20.305q0 1.123-0.08984 1.9316-0.04492 0.76367-0.17969 1.3477-0.13477 0.53906-0.35938 0.94336-0.22461 0.40429-0.71875 0.94335-0.49414 0.49415-1.9316 1.3027-1.3926 0.80859-3.459 1.5723-2.0215 0.71875-4.6719 1.2129-2.6055 0.49414-5.6602 0.49414-5.9746 0-10.781-1.8418-4.8066-1.8418-8.1758-5.4805-3.3691-3.6836-5.166-9.1641t-1.7969-12.758q0-7.4121 1.9766-13.162 1.9766-5.75 5.5254-9.6582 3.5488-3.9082 8.4902-5.9297 4.9863-2.0215 10.961-2.0215 2.4258 0 4.6719 0.4043 2.2461 0.40429 4.1328 1.0781 1.9316 0.62891 3.459 1.4824 1.5273 0.85352 2.1113 1.4824 0.62891 0.58398 0.85352 0.98828 0.22461 0.40429 0.35938 1.0332 0.13477 0.62891 0.17969 1.4824 0.08984 0.85352 0.08984 2.1113 0 1.3477-0.08984 2.291t-0.31445 1.5273q-0.22461 0.58398-0.53906 0.85352-0.31445 0.26953-0.71875 0.26953-0.67383 0-1.707-0.76367-1.0332-0.8086-2.6953-1.752-1.6172-0.98828-3.9082-1.752-2.2461-0.80859-5.3906-0.80859-3.459 0-6.1992 1.4375-2.6953 1.3926-4.627 4.043-1.8867 2.6055-2.875 6.334-0.98828 3.7285-0.98828 8.4004 0 5.1211 1.0332 8.8945 1.0781 3.7285 3.0098 6.1543 1.9766 2.4258 4.7168 3.6387 2.7852 1.168 6.2441 1.168 3.1445 0 5.4355-0.71875 2.291-0.76367 3.9082-1.6621 1.6621-0.89844 2.6953-1.6172 1.0781-0.71875 1.6621-0.71875 0.44922 0 0.71875 0.17969t0.44922 0.71875q0.17969 0.53906 0.26953 1.5273 0.08984 0.94336 0.08984 2.5606z"/>
   <path class="svgtext-path" d=""/>
  </g>
 </g>
</svg>

If I look at the SVG in Edge and Chrome I see that there is now “::before” and “::after” which doesnt exist when there is no style tag. Its just not putting the content there. As you can see in the below picture. I though if I could get that style set inside the svg that I could then assign a variable to the content in order to updated but the text isnt rendering. The “r” that is show is already part of the svg file.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.