0

Let me introduce my problem, I have an SVG image in string format and I would like to change programatically some properties. I think it will be easier to explain with an example:

This is my .svg example.

<svg xmlns="http://www.w3.org/2000/svg" width="475.07" height="475.07" viewBox="-5 -5 1200.075 900.075" fill="#FFF">
    <text dominant-baseline="hanging" text-anchor="middle" transform="translate(52.7996,761.494)"  font-family="Segoe UI" font-size="12" font-weight="400" fill="black">-800</text>
    <text dominant-baseline="hanging" text-anchor="middle" transform="translate(117.0119,761.494)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">-700</text>
    <polyline points="52.7996,45.8345 52.7996,750.494" style="fill:none;stroke:rgb(0,0,0);stroke-width:1;stroke-opacity:0.250980392156863" shape-rendering="crispEdges" />
    <polyline points="117.0119,45.8345 117.0119,750.494" style="fill:none;stroke:rgb(0,0,0);stroke-width:1;stroke-opacity:0.250980392156863" shape-rendering="crispEdges" />
</svg>

Then I would like to change the part from transform="translate(X,Y)" to x="X" y="Y"

So that the svg string would look like this one:

<svg xmlns="http://www.w3.org/2000/svg" width="475.07" height="475.07" viewBox="-5 -5 1200.075 900.075" fill="#FFF">
    <text dominant-baseline="hanging" text-anchor="middle" x="52.7996" y="761.494" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">-800</text>
    <text dominant-baseline="hanging" text-anchor="middle" x="117.0119" y="761.494" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">-700</text>
    <polyline points="52.7996,45.8345 52.7996,750.494" style="fill:none;stroke:rgb(0,0,0);stroke-width:1;stroke-opacity:0.250980392156863" shape-rendering="crispEdges" />
    <polyline points="117.0119,45.8345 117.0119,750.494" style="fill:none;stroke:rgb(0,0,0);stroke-width:1;stroke-opacity:0.250980392156863" shape-rendering="crispEdges" />
</svg>

My first thoughts were using something like here but I only have the keyword "transform="translate(" and not ending (some parts of the string don't have the " font-family right after) and also trying to keep the values between brackets I would go for a split with "," as a delimiter if I had the substring (X,Y) however the problem is gitting that substrings along the string.

Thanks in advance!

Lluis
  • 1
  • 4
  • Don't look for `" font-family`, just look for `"` – Zohar Peled Aug 02 '23 at 14:32
  • Hi @ZoharPeled ! I can't look for just `"` because there are more coincidences that shouldn't be taken into account! – Lluis Aug 02 '23 at 14:41
  • Look for the first `"` after `transform="`, or try working with HtmlAgilityPack to get the value of the `transform` property (I don't know how well it supports svg) – Zohar Peled Aug 02 '23 at 14:50
  • So you would go over the full string (it's massive!) looking for each `transform="` until the next `"` and then get the substring and split @ZoharPeled? I was expecting something more direct like a replace somehow that do the job in an (almost) single step... – Lluis Aug 02 '23 at 14:58
  • `Regex.Replace()` with pattern: `@"transform=\""translate\((?\d*.\d*),(?\d*.\d*)\)\"""` replacement: `@"x=${x} y=${y}"` – Jimi Aug 02 '23 at 16:49
  • Simply replacing transform with x/y attributes won't give the correct results. You'll end up with multiple x/y attributes, and depending on the order and what's rendering the SVG, you can have inconsistent results. You'd need to apply the transform to the existing x/y coordinates, which can't be done with a string replacement or regex. If you want to transform SVG, then it's far more robust to parse the SVG than to hack at the text with find/replace/regex. – Paul Dempsey Aug 02 '23 at 17:48

0 Answers0