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
