From: Sam Moore <matches@ucc.asn.au>
Date: Tue, 12 Aug 2014 10:29:59 +0000 (+0800)
Subject: Only slightly totally broken SVG transformations
X-Git-Url: https://git.ucc.asn.au/?a=commitdiff_plain;h=255065a607d82846c4a8b730000d547b3f080d0c;p=ipdf%2Fcode.git
Only slightly totally broken SVG transformations
Argh
The matrices are ((a c e) (b d f) (0 0 1))
*Not* ((a b c) (d e f) (0 0 1))
I guess it's better than the Rect bounds crap.
But still broken.
---
diff --git a/src/document.cpp b/src/document.cpp
index f23b406..9ac96b3 100644
--- a/src/document.cpp
+++ b/src/document.cpp
@@ -263,40 +263,143 @@ bool Document::operator==(const Document & equ) const
+// Behold my amazing tokenizing abilities
+static string & GetToken(const string & d, string & token, unsigned & i, const string & delims = "()[],{}<>;:=")
+{
+ token.clear();
+ while (i < d.size() && iswspace(d[i]))
+ {
+ ++i;
+ }
+
+ while (i < d.size())
+ {
+ if (iswspace(d[i]) || strchr(delims.c_str(),d[i]) != NULL)
+ {
+ if (token.size() == 0 && !iswspace(d[i]))
+ {
+ token += d[i++];
+ }
+ break;
+ }
+ token += d[i++];
+ }
+ //Debug("Got token \"%s\"", token.c_str());
+ return token;
+}
+
+static void GetXYPair(const string & d, Real & x, Real & y, unsigned & i,const string & delims = "()[],{}<>;:=")
+{
+ string token("");
+ x = strtod(GetToken(d, token, i, delims).c_str(),NULL);
+ if (GetToken(d, token, i, delims) != ",")
+ {
+ Fatal("Expected \",\" seperating x,y pair");
+ }
+ y = strtod(GetToken(d, token, i, delims).c_str(),NULL);
+}
+
+static void TransformXYPair(Real & x, Real & y, SVGMatrix & transform)
+{
+ Real x0(x);
+ x = transform.a * x + transform.c * y + transform.e;
+ y = transform.b * x0 + transform.d * y + transform.f;
+}
+
+void Document::ParseSVGTransform(const string & s, SVGMatrix & transform)
+{
+ Debug("Parsing transform %s", s.c_str());
+ string token;
+ string command;
+ unsigned i = 0;
+ GetToken(s, command, i);
+ Debug("Token is \"%s\"", command.c_str());
+
+ SVGMatrix delta = {1,0,0,1,0,0};
+
+
+ assert(GetToken(s,token, i) == "(");
+ if (command == "translate")
+ {
+ GetXYPair(s, delta.e, delta.f, i);
+ assert(GetToken(s,token, i) == ")");
+ }
+ else if (command == "matrix")
+ {
+ GetXYPair(s, delta.a, delta.b,i);
+ GetXYPair(s, delta.c, delta.d,i);
+ GetXYPair(s, delta.e, delta.f,i);
+ assert(GetToken(s,token, i) == ")");
+ }
+ else if (command == "scale")
+ {
+ delta.a = (strtod(GetToken(s,token,i).c_str(), NULL));
+ GetToken(s, token, i);
+ if (token != ")")
+ {
+ delta.b = (strtod(token.c_str(), NULL));
+ }
+ else
+ {
+ delta.b = delta.a;
+ }
+
+ }
+ else
+ {
+ Warn("Unrecognised transform \"%s\", using identity", command.c_str());
+ }
+
+ Debug("Old transform is {%f,%f,%f,%f,%f,%f}", transform.a, transform.b, transform.c, transform.d,transform.e,transform.f);
+ Debug("Delta transform is {%f,%f,%f,%f,%f,%f}", delta.a, delta.b, delta.c, delta.d,delta.e,delta.f);
+
+ SVGMatrix old(transform);
+ transform.a = old.a * delta.a + old.c * delta.b;
+ transform.c = old.a * delta.c + old.c * delta.d;
+ transform.e = old.a * delta.e + old.c * delta.f + old.e;
+
+ transform.b = old.b * delta.a + old.d * delta.b;
+ transform.d = old.b * delta.c + old.d * delta.d;
+ transform.f = old.b * delta.e + old.d * delta.f + old.f;
+
+ Debug("New transform is {%f,%f,%f,%f,%f,%f}", transform.a, transform.b, transform.c, transform.d,transform.e,transform.f);
+}
-void Document::ParseSVGNode(pugi::xml_node & root, const Rect & bounds, Real & width, Real & height)
+void Document::ParseSVGNode(pugi::xml_node & root, SVGMatrix & parent_transform)
{
Debug("Parse node <%s>", root.name());
- pugi::xml_attribute attrib_w = root.attribute("width");
- pugi::xml_attribute attrib_h = root.attribute("height");
- if (!attrib_w.empty())
- width = attrib_w.as_float() * bounds.w;
- if (!attrib_h.empty())
- height = attrib_h.as_float() * bounds.h;
-
+
+
for (pugi::xml_node child = root.first_child(); child; child = child.next_sibling())
{
-
+ SVGMatrix transform(parent_transform);
+ pugi::xml_attribute attrib_trans = child.attribute("transform");
+ if (!attrib_trans.empty())
+ {
+ ParseSVGTransform(attrib_trans.as_string(), transform);
+ }
if (strcmp(child.name(), "svg") == 0 || strcmp(child.name(),"g") == 0
|| strcmp(child.name(), "group") == 0)
{
- //TODO: Handle translates etc here
- ParseSVGNode(child, bounds, width, height);
+
+ ParseSVGNode(child, transform);
continue;
}
else if (strcmp(child.name(), "path") == 0)
{
string d = child.attribute("d").as_string();
Debug("Path data attribute is \"%s\"", d.c_str());
- ParseSVGPathData(d, Rect(bounds.x,bounds.y,width,height));
+ ParseSVGPathData(d, transform);
}
else if (strcmp(child.name(), "line") == 0)
{
- Real x0(child.attribute("x1").as_float()/width + bounds.x);
- Real y0(child.attribute("y1").as_float()/height + bounds.y);
- Real x1(child.attribute("x2").as_float()/width + bounds.x);
- Real y1(child.attribute("y2").as_float()/height + bounds.y);
+ Real x0(child.attribute("x1").as_float());
+ Real y0(child.attribute("y1").as_float());
+ Real x1(child.attribute("x2").as_float());
+ Real y1(child.attribute("y2").as_float());
+ TransformXYPair(x0,y0,transform);
+ TransformXYPair(x1,y1,transform);
unsigned index = AddBezierData(Bezier(x0,y0,x1,y1,x1,y1,x1,y1));
Add(BEZIER, Rect(0,0,1,1), index);
}
@@ -307,8 +410,15 @@ void Document::ParseSVGNode(pugi::xml_node & root, const Rect & bounds, Real & w
for (size_t i = 0; i < 4; ++i)
coords[i] = child.attribute(attrib_names[i]).as_float();
- bool outline = !(child.attribute("fill"));
- Add(outline?RECT_OUTLINE:RECT_FILLED, Rect(coords[0]/width + bounds.x, coords[1]/height + bounds.y, coords[2]/width, coords[3]/height),0);
+ Real x2(coords[0]+coords[2]);
+ Real y2(coords[1]+coords[3]);
+ TransformXYPair(coords[0],coords[1],transform); // x, y, transform
+ TransformXYPair(x2,y2,transform);
+ coords[2] = x2 - coords[0];
+ coords[3] = y2 - coords[1];
+
+ bool outline = !(child.attribute("fill") && strcmp(child.attribute("fill").as_string(),"none") != 0);
+ Add(outline?RECT_OUTLINE:RECT_FILLED, Rect(coords[0], coords[1], coords[2], coords[3]),0);
}
else if (strcmp(child.name(), "circle") == 0)
{
@@ -316,10 +426,12 @@ void Document::ParseSVGNode(pugi::xml_node & root, const Rect & bounds, Real & w
Real cy = child.attribute("cy").as_float();
Real r = child.attribute("r").as_float();
- Real x = (cx - r)/width + bounds.x;
- Real y = (cy - r)/height + bounds.y;
- Real w = Real(2)*r/width;
- Real h = Real(2)*r/height;
+ Real x = (cx - r);
+ Real y = (cy - r);
+ TransformXYPair(x,y,transform);
+ Real w = Real(2)*r*transform.a; // width scales
+ Real h = Real(2)*r*transform.d; // height scales
+
Rect rect(x,y,w,h);
Add(CIRCLE_FILLED, rect,0);
@@ -327,8 +439,9 @@ void Document::ParseSVGNode(pugi::xml_node & root, const Rect & bounds, Real & w
}
else if (strcmp(child.name(), "text") == 0)
{
- Real x = child.attribute("x").as_float()/width + bounds.x;
- Real y = child.attribute("y").as_float()/height + bounds.y;
+ Real x = child.attribute("x").as_float();
+ Real y = child.attribute("y").as_float();
+ TransformXYPair(x,y,transform);
Debug("Add text \"%s\"", child.child_value());
AddText(child.child_value(), 0.05, x, y);
}
@@ -352,40 +465,16 @@ void Document::LoadSVG(const string & filename, const Rect & bounds)
Debug("Loaded XML - %s", result.description());
input.close();
- Real width(1);
- Real height(1);
- ParseSVGNode(doc_xml, bounds,width,height);
-}
-// Behold my amazing tokenizing abilities
-static string & GetToken(const string & d, string & token, unsigned & i)
-{
- token.clear();
- while (i < d.size() && iswspace(d[i]))
- {
- ++i;
- }
-
- while (i < d.size())
- {
- if (d[i] == ',' || (isalpha(d[i]) && d[i] != 'e') || iswspace(d[i]))
- {
- if (token.size() == 0 && !iswspace(d[i]))
- {
- token += d[i++];
- }
- break;
- }
- token += d[i++];
- }
- //Debug("Got token \"%s\"", token.c_str());
- return token;
+ SVGMatrix transform = {bounds.w, 0,bounds.x, bounds.h,0,bounds.y};
+ ParseSVGNode(doc_xml, transform);
}
+
// Fear the wrath of the tokenizing svg data
// Seriously this isn't really very DOM-like at all is it?
-void Document::ParseSVGPathData(const string & d, const Rect & bounds)
+void Document::ParseSVGPathData(const string & d, const SVGMatrix & transform)
{
Real x[4] = {0,0,0,0};
Real y[4] = {0,0,0,0};
@@ -401,6 +490,8 @@ void Document::ParseSVGPathData(const string & d, const Rect & bounds)
bool start = false;
+ static string delims("()[],{}<>;:=LlmMqQzZcC");
+
while (i < d.size() && GetToken(d, token, i).size() > 0)
{
if (isalpha(token[0]))
@@ -416,43 +507,43 @@ void Document::ParseSVGPathData(const string & d, const Rect & bounds)
if (command == "m" || command == "M")
{
- Debug("Construct moveto command");
- Real dx = Real(strtod(GetToken(d,token,i).c_str(),NULL)) / bounds.w;
- assert(GetToken(d,token,i) == ",");
- Real dy = Real(strtod(GetToken(d,token,i).c_str(),NULL)) / bounds.h;
+ //Debug("Construct moveto command");
+ Real dx = Real(strtod(GetToken(d,token,i,delims).c_str(),NULL)) * transform.a;
+ assert(GetToken(d,token,i,delims) == ",");
+ Real dy = Real(strtod(GetToken(d,token,i,delims).c_str(),NULL)) * transform.d;
- x[0] = (relative) ? x[0] + dx : dx;
- y[0] = (relative) ? y[0] + dy : dy;
+ x[0] = (relative) ? x[0] + dx : dx + transform.e;
+ y[0] = (relative) ? y[0] + dy : dy + transform.f;
- Debug("mmoveto %f,%f", Float(x[0]),Float(y[0]));
+ //Debug("mmoveto %f,%f", Float(x[0]),Float(y[0]));
command = (command == "m") ? "l" : "L";
}
else if (command == "c" || command == "C" || command == "q" || command == "Q")
{
- Debug("Construct curveto command");
- Real dx = Real(strtod(GetToken(d,token,i).c_str(),NULL))/bounds.w;
- assert(GetToken(d,token,i) == ",");
- Real dy = Real(strtod(GetToken(d,token,i).c_str(),NULL))/bounds.h;
+ //Debug("Construct curveto command");
+ Real dx = Real(strtod(GetToken(d,token,i,delims).c_str(),NULL)) * transform.a;
+ assert(GetToken(d,token,i,delims) == ",");
+ Real dy = Real(strtod(GetToken(d,token,i,delims).c_str(),NULL))*transform.d;
- x[1] = (relative) ? x[0] + dx : dx;
- y[1] = (relative) ? y[0] + dy : dy;
+ x[1] = (relative) ? x[0] + dx : dx + transform.e;
+ y[1] = (relative) ? y[0] + dy : dy + transform.f;
- dx = Real(strtod(GetToken(d,token,i).c_str(),NULL)) / bounds.w;
- assert(GetToken(d,token,i) == ",");
- dy = Real(strtod(GetToken(d,token,i).c_str(),NULL)) / bounds.h;
+ dx = Real(strtod(GetToken(d,token,i,delims).c_str(),NULL)) *transform.a;
+ assert(GetToken(d,token,i,delims) == ",");
+ dy = Real(strtod(GetToken(d,token,i,delims).c_str(),NULL)) *transform.d;
- x[2] = (relative) ? x[0] + dx : dx;
- y[2] = (relative) ? y[0] + dy : dy;
+ x[2] = (relative) ? x[0] + dx : dx + transform.e;
+ y[2] = (relative) ? y[0] + dy : dy + transform.f;
if (command != "q" && command != "Q")
{
- dx = Real(strtod(GetToken(d,token,i).c_str(),NULL)) / bounds.w;
- assert(GetToken(d,token,i) == ",");
- dy = Real(strtod(GetToken(d,token,i).c_str(),NULL)) / bounds.h;
- x[3] = (relative) ? x[0] + dx : dx;
- y[3] = (relative) ? y[0] + dy : dy;
+ dx = Real(strtod(GetToken(d,token,i,delims).c_str(),NULL)) *transform.a;
+ assert(GetToken(d,token,i,delims) == ",");
+ dy = Real(strtod(GetToken(d,token,i,delims).c_str(),NULL)) *transform.d;
+ x[3] = (relative) ? x[0] + dx : dx + transform.e;
+ y[3] = (relative) ? y[0] + dy : dy + transform.f;
}
else
{
@@ -469,7 +560,7 @@ void Document::ParseSVGPathData(const string & d, const Rect & bounds)
Add(BEZIER,Rect(0,0,1,1),index);
- Debug("[%u] curveto %f,%f %f,%f %f,%f", index, Float(x[1]),Float(y[1]),Float(x[2]),Float(y[2]),Float(x[3]),Float(y[3]));
+ //Debug("[%u] curveto %f,%f %f,%f %f,%f", index, Float(x[1]),Float(y[1]),Float(x[2]),Float(y[2]),Float(x[3]),Float(y[3]));
x[0] = x[3];
y[0] = y[3];
@@ -478,14 +569,14 @@ void Document::ParseSVGPathData(const string & d, const Rect & bounds)
}
else if (command == "l" || command == "L")
{
- Debug("Construct lineto command");
+ //Debug("Construct lineto command");
- Real dx = Real(strtod(GetToken(d,token,i).c_str(),NULL)) / bounds.w;
- assert(GetToken(d,token,i) == ",");
- Real dy = Real(strtod(GetToken(d,token,i).c_str(),NULL)) / bounds.h;
+ Real dx = Real(strtod(GetToken(d,token,i,delims).c_str(),NULL)) *transform.a;
+ assert(GetToken(d,token,i,delims) == ",");
+ Real dy = Real(strtod(GetToken(d,token,i,delims).c_str(),NULL)) *transform.d;
- x[1] = (relative) ? x[0] + dx : dx;
- y[1] = (relative) ? y[0] + dy : dy;
+ x[1] = (relative) ? x[0] + dx : dx + transform.e;
+ y[1] = (relative) ? y[0] + dy : dy + transform.f;
x[2] = x[1];
y[2] = y[1];
@@ -496,7 +587,7 @@ void Document::ParseSVGPathData(const string & d, const Rect & bounds)
unsigned index = AddBezierData(Bezier(x[0],y[0],x[1],y[1],x[2],y[2],x[3],y[3]));
Add(BEZIER,Rect(0,0,1,1),index);
- Debug("[%u] lineto %f,%f %f,%f", index, Float(x[0]),Float(y[0]),Float(x[1]),Float(y[1]));
+ //Debug("[%u] lineto %f,%f %f,%f", index, Float(x[0]),Float(y[0]),Float(x[1]),Float(y[1]));
x[0] = x[3];
y[0] = y[3];
@@ -504,7 +595,7 @@ void Document::ParseSVGPathData(const string & d, const Rect & bounds)
}
else if (command == "z" || command == "Z")
{
- Debug("Construct returnto command");
+ //Debug("Construct returnto command");
x[1] = x0;
y[1] = y0;
x[2] = x0;
@@ -515,7 +606,7 @@ void Document::ParseSVGPathData(const string & d, const Rect & bounds)
unsigned index = AddBezierData(Bezier(x[0],y[0],x[1],y[1],x[2],y[2],x[3],y[3]));
Add(BEZIER,Rect(0,0,1,1),index);
- Debug("[%u] returnto %f,%f %f,%f", index, Float(x[0]),Float(y[0]),Float(x[1]),Float(y[1]));
+ //Debug("[%u] returnto %f,%f %f,%f", index, Float(x[0]),Float(y[0]),Float(x[1]),Float(y[1]));
x[0] = x[3];
y[0] = y[3];
diff --git a/src/document.h b/src/document.h
index 8f2c087..52e9295 100644
--- a/src/document.h
+++ b/src/document.h
@@ -11,6 +11,18 @@ typedef struct stbtt_fontinfo stbtt_fontinfo;
namespace IPDF
{
+ struct SVGMatrix
+ {
+ Real a; // width
+ Real b; // skew y by x
+ Real c; // skew x by y
+ Real d; // height
+ Real e; // translate x
+ Real f; // translate y
+ };
+ // SVG matrix transforms (x,y) <- (a x' + c y' + e, b x' + d y' + f)
+ // Equivelant to OpenGL 3d matrix transform ((a, c, e) (b, d, f) (0,0,1))
+
class Document
{
public:
@@ -41,6 +53,10 @@ namespace IPDF
unsigned AddBezierData(const Bezier & bezier);
+
+
+
+
/** SVG Related functions **/
@@ -48,9 +64,12 @@ namespace IPDF
void LoadSVG(const std::string & filename, const Rect & bounds = Rect(0,0,1,1));
/** Parse an SVG node or SVG-group node, adding children to the document **/
- void ParseSVGNode(pugi::xml_node & root, const Rect & bounds, Real & width, Real & height);
+ void ParseSVGNode(pugi::xml_node & root, SVGMatrix & transform);
/** Parse an SVG path with string **/
- void ParseSVGPathData(const std::string & d, const Rect & bounds);
+ void ParseSVGPathData(const std::string & d, const SVGMatrix & transform);
+
+ /** Modify an SVG transformation matrix **/
+ static void ParseSVGTransform(const std::string & s, SVGMatrix & transform);
/** Font related functions **/
void SetFont(const std::string & font_filename);
diff --git a/src/main.cpp b/src/main.cpp
index 49c818e..8942a9c 100644
--- a/src/main.cpp
+++ b/src/main.cpp
@@ -78,7 +78,7 @@ int main(int argc, char ** argv)
if (input_filename != NULL)
{
- doc.LoadSVG(input_filename);
+ doc.LoadSVG(input_filename, Rect(0,0,Real(1)/Real(800),Real(1)/Real(600)));
}
else
{
diff --git a/src/svg-tests/lines.svg b/src/svg-tests/lines.svg
new file mode 100644
index 0000000..f15c961
--- /dev/null
+++ b/src/svg-tests/lines.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="400" height="400">
+ <line x1="0" y1="0" x2="400" y2="0" stroke="red"/>
+
+ <line x1="0" y1="0" x2="0" y2="400" stroke="red"/>
+
+ <line x1="400" y1="0" x2="400" y2="400" stroke="red"/>
+
+ <line x1="0" y1="400" x2="400" y2="400" stroke="red"/>
+
+ <line
+ x1="0" y1="0" x2="400" y2="400" stroke="black"/>
+
+ <line
+ x1="400" y1="0" x2="0" y2="400" stroke="black"/>
+</svg>
diff --git a/src/svg-tests/paths.svg b/src/svg-tests/paths.svg
new file mode 100644
index 0000000..dd72201
--- /dev/null
+++ b/src/svg-tests/paths.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="400" height="400"
+ >
+ <g transform="translate(-230,-250)">
+ <path
+ style="fill:#ac9d93;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
+ d="m 478.78564,339.0153 -16.66751,-1.01016 -36.11296,-47.7297 -12.6269,-33.0825 28.53681,17.17259 23.2335,24.4962 10.35407,21.97082 z"
+ id="path4374"
+ inkscape:connector-curvature="0" />
+ <path
+ style="fill:#ac9d93;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
+ d="m 451.25899,350.37951 -51.26524,-30.55711 -27.52666,-37.12311 -0.25254,-6.81853 30.30458,4.29315 23.23351,11.11168 24.74873,26.5165 12.62691,21.71828 z"
+ id="path4370"
+ inkscape:connector-curvature="0" />
+
+ <path
+ style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="M 25,158.21333 36.071428,144.28476 l 20,20 Z"
+ id="path4498"
+ inkscape:connector-curvature="0"
+ transform="translate(227.32245,266.11266)" />
+ </g>
+ </svg>
diff --git a/src/svg-tests/text.svg b/src/svg-tests/text.svg
new file mode 100644
index 0000000..7c572c6
--- /dev/null
+++ b/src/svg-tests/text.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="400" height="400">
+ <text x="200" y="100">Example SVG text 1</text>
+ <line x1="10" y1="40" x2="200" y2="40" stroke="black"/>
+</svg>
diff --git a/src/svg-tests/transforms.svg b/src/svg-tests/transforms.svg
new file mode 100644
index 0000000..e840314
--- /dev/null
+++ b/src/svg-tests/transforms.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="400" height="400">
+ <rect x="0" y="0" width="400" height="400" stroke="red" fill="none"/>
+
+
+ <rect x="0" y="0" width="100" height="100" stroke="blue" fill="none"
+ transform="translate(100,100)"
+ />
+
+ <rect x="100" y="50" width="25" height="25" stroke="green" fill="none"
+ transform="scale(2,2)"
+ />
+
+ <!--<rect x="200" y="150" width="50" height="75" stroke="red" fill="none"
+
+ />-->
+
+</svg>