CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-04-23 12:17:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

Show icons depicting the different values of the crossing:markings field

Browse Source 
for https://github.com/openstreetmap/id-tagging-schema/pull/590
This commit is contained in:
Martin Raifer
2022-11-08 13:46:02 +01:00
parent 910a206998
commit ef044cd17d
15 changed files with 331 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+1
View File
@@ -61,6 +61,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
* Add new field type `colour` ([schema-builder#38], [#8782])
* Add ability to reference strings of other presets/fields
* Render `natural=strait` features in blue color ([#9294])
* Show icons depicting the different values of the `crossing:markings` field
#### :hammer: Development
* Synchronize fetching of released presets files
* Make settings like CDN and API urls configurable in a central config file (`/config/is.js`)
css/80_app.css
+31
View File
@@ -1735,6 +1735,37 @@ a.hide-toggle {
width: auto;
}
.form-field-input-combo .tag-value-icon {
display: inline-block;
position: relative;
height: 24px;
width: 30px;
margin-right: -30px;
align-self: center;
vertical-align: middle;
z-index: 1;
text-align: center;
}
.ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon {
margin-right: 0;
margin-left: -30px;
}
.tag-value-icon .icon {
width: 11px;
height: 17px;
margin: auto;
}
.ideditor[dir='ltr'] .form-field-input-combo .tag-value-icon + input {
padding-left: 30px;
}
.ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon + input {
padding-right: 30px;
}
.combobox-option .tag-value-icon {
display: inline-block;
width: 18px;
}
/* Field - Text / Numeric
------------------------------------------------------- */
modules/ui/fields/combo.js
+48 -2
View File
@@ -8,6 +8,7 @@ import { osmEntity } from '../../osm/entity';
import { t } from '../../core/localizer';
import { services } from '../../services';
import { uiCombobox } from '../combobox';
import { svgIcon } from '../../svg/icon';
import { utilKeybinding } from '../../util/keybinding';
import { utilArrayUniq, utilGetSetValue, utilNoAuto, utilRebind, utilTotalExtent, utilUnicodeCharsCount } from '../../util';
@@ -20,6 +21,22 @@ export {
uiFieldCombo as uiFieldTypeCombo
};
const valueIcons = {
'crossing:markings': [
'dashes',
'dots',
'ladder:paired',
'ladder:skewed',
'ladder',
'lines:paired',
'lines',
'surface',
'zebra:bicolour',
'zebra:double',
'zebra:paired',
'zebra',
]
};
export function uiFieldCombo(field, context) {
var dispatch = d3_dispatch('change');
@@ -165,7 +182,7 @@ export function uiFieldCombo(field, context) {
key: v,
value: stringsField.t('options.' + v, { default: v }),
title: v,
display: stringsField.t.append('options.' + v, { default: v }),
display: beautifyDisplay(stringsField.t.append('options.' + v, { default: v }), v),
klass: stringsField.hasTextForStringId('options.' + v) ? '' : 'raw-option'
};
});
@@ -244,7 +261,7 @@ export function uiFieldCombo(field, context) {
return {
key: k,
value: label,
display: stringsField.t.append('options.' + k, { default: k }),
display: beautifyDisplay(stringsField.t.append('options.' + k, { default: k }), k),
title: isLocalizable ? k : (d.title !== label ? d.title : ''),
klass: isLocalizable ? '' : 'raw-option'
};
@@ -257,6 +274,20 @@ export function uiFieldCombo(field, context) {
});
}
// adds icons to tag values which have one
function beautifyDisplay(disp, value) {
if (valueIcons[field.key] && valueIcons[field.key].indexOf(value) !== -1) {
return function(selection) {
selection
.insert('span', ':first-child')
.attr('class', 'tag-value-icon')
.call(svgIcon('#iD-crossing_markings-' + value.replace(':', '_')));
disp.call(this, selection);
};
}
return disp;
}
function setPlaceholder(values) {
@@ -626,6 +657,21 @@ export function uiFieldCombo(field, context) {
dispatch.call('change', this, t);
}
});
if (valueIcons[field.key]) {
_container.selectAll('.tag-value-icon').remove();
var value = tags[field.key];
if (valueIcons[field.key].indexOf(value) !== -1) {
var iconSelector = _container.selectAll('.tag-value-icon')
.data([value]);
iconSelector
.enter()
.insert('div', 'input')
.attr('class', 'tag-value-icon')
.call(svgIcon('#iD-crossing_markings-' + value.replace(':', '_')));
}
}
}
};
svg/iD-sprite/fields/crossing_markings/crossing_markings-dashes.svg
+9
View File
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 11 17" height="17" width="11">
<path
d="m 0.625,0 v 17 0"
style="fill:none;stroke:#000000;stroke-width:1.25;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:3.75,1.25;stroke-dashoffset:0.875;stroke-opacity:1" />
<path
d="m 10.375,0 v 17 0"
style="fill:none;stroke:#000000;stroke-width:1.25;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:3.75,1.25;stroke-dashoffset:0.875;stroke-opacity:1" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 662 B

svg/iD-sprite/fields/crossing_markings/crossing_markings-dots.svg
+9
View File
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 11 17" height="17" width="11">
<path
d="m 0.75,0 v 17 0"
style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1.5,1.5;stroke-dashoffset:0;stroke-opacity:1" />
<path
d="m 10.25,0 v 17 0"
style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1.5,1.5;stroke-dashoffset:0;stroke-opacity:1" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 646 B

svg/iD-sprite/fields/crossing_markings/crossing_markings-ladder.svg
+21
View File
@@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 11 17" height="17" width="11">
<path
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 0.5,0 v 17 0" />
<path
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 10.5,0 v 17 0" />
<path
style="fill:none;stroke:#000000;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 11,2.25 H 0" />
<path
style="fill:none;stroke:#000000;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 11,6.416667 H 0" />
<path
style="fill:none;stroke:#000000;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 11,10.583333 H 0" />
<path
style="fill:none;stroke:#000000;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 11,14.75 H 0" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

svg/iD-sprite/fields/crossing_markings/crossing_markings-ladder_paired.svg
+33
View File
@@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 11 17" height="17" width="11">
<path
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 0.5,0 v 17 0" />
<path
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 10.5,0 v 17 0" />
<g transform="translate(-47,-44)">
<path
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 58,45.5 H 47" />
<path
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 58,47.5 H 47" />
</g>
<g transform="translate(-47,-32)">
<path
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 58,45.5 H 47" />
<path
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 58,47.5 H 47" />
</g>
<g transform="translate(-47,-38)">
<path
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 58,45.5 H 47" />
<path
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 58,47.5 H 47" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

svg/iD-sprite/fields/crossing_markings/crossing_markings-ladder_skewed.svg
+21
View File
@@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 11 17" height="17" width="11">
<path
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 0.5,0 v 17 0" />
<path
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 10.5,0 v 17 0" />
<path
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 10.5,3.071272 -10,-2" />
<path
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 10.5,7.3704316 -10,-2" />
<path
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 10.5,11.669591 0.5,9.6695906" />
<path
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 10.5,15.96875 -10,-2" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

svg/iD-sprite/fields/crossing_markings/crossing_markings-lines.svg
+9
View File
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 11 17" height="17" width="11">
<path
d="m 0.75,0 v 17 0"
style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
d="m 10.25,0 v 17 0"
style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 600 B

svg/iD-sprite/fields/crossing_markings/crossing_markings-lines_paired.svg
+15
View File
@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 11 17" height="17" width="11">
<path
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 0.5,0 v 17 0" />
<path
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 2.5,0 v 17 0" />
<path
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 8.5,0 v 17 0" />
<path
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 10.5,0 v 17 0" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 972 B

svg/iD-sprite/fields/crossing_markings/crossing_markings-surface.svg
+34
View File
@@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 11 17" height="17" width="11">
<defs>
<pattern
patternTransform="matrix(0.97434076,-0.97214623,0.96995664,0.97214623,-0.2343755,0.6906405)"
id="pattern4249"
xlink:href="#Checkerboard" />
<pattern
patternUnits="userSpaceOnUse"
width="2"
height="2"
patternTransform="translate(0,0) scale(10,10)"
id="Checkerboard">
<rect
style="fill:black;stroke:none"
x="0"
y="0"
width="1"
height="1" />
<rect
style="fill:black;stroke:none"
x="1"
y="1"
width="1"
height="1" />
</pattern>
</defs>
<rect
y="0"
x="0"
height="17"
width="11"
style="fill:url(#pattern4249);fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.2525773" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

svg/iD-sprite/fields/crossing_markings/crossing_markings-zebra.svg
+15
View File
@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 11 17" height="17" width="11">
<path
d="M 11,1.25 H 0"
style="fill:none;stroke:#000000;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
d="M 11,6.083334 H 0"
style="fill:none;stroke:#000000;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
d="M 11,10.916667 H 0"
style="fill:none;stroke:#000000;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
d="M 11,15.75 H 0"
style="fill:none;stroke:#000000;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 985 B

svg/iD-sprite/fields/crossing_markings/crossing_markings-zebra_bicolour.svg
+21
View File
@@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 11 17" height="17" width="11">
<path
d="M 11,1 H 0"
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
d="M 11,4 H 0"
style="fill:none;stroke:#a6a6a6;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
d="M 11,10 H 0"
style="fill:none;stroke:#a6a6a6;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
d="M 11,13 H 0"
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
d="M 11,16 H 0"
style="fill:none;stroke:#a6a6a6;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
d="M 11,7 H 0"
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

svg/iD-sprite/fields/crossing_markings/crossing_markings-zebra_double.svg
+35
View File
@@ -0,0 +1,35 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 11 17" height="17" width="11">
<g>
<path
style="fill:none;stroke:#000000;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.5;stroke-opacity:1"
d="M 4.5,1.25 H 0" />
<path
style="fill:none;stroke:#000000;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.5;stroke-opacity:1"
d="M 11,1.25 H 6.5" />
</g>
<g transform="translate(0,9.666667)">
<path
style="fill:none;stroke:#000000;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.5;stroke-opacity:1"
d="M 4.5,1.25 H 0" />
<path
style="fill:none;stroke:#000000;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.5;stroke-opacity:1"
d="M 11,1.25 H 6.5" />
</g>
<g transform="translate(0,4.833334)">
<path
style="fill:none;stroke:#000000;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.5;stroke-opacity:1"
d="M 4.5,1.25 H 0" />
<path
style="fill:none;stroke:#000000;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.5;stroke-opacity:1"
d="M 11,1.25 H 6.5" />
</g>
<g transform="translate(0,14.5)">
<path
style="fill:none;stroke:#000000;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.5;stroke-opacity:1"
d="M 4.5,1.25 H 0" />
<path
style="fill:none;stroke:#000000;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.5;stroke-opacity:1"
d="M 11,1.25 H 6.5" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

svg/iD-sprite/fields/crossing_markings/crossing_markings-zebra_paired.svg
+29
View File
@@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 11 17" height="17" width="11">
<g transform="translate(-47,-45)">
<g transform="translate(0,0.125)">
<path
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 58,45.375 H 47" />
<path
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 58,47.404661 H 47" />
</g>
<g transform="translate(0,7.1101695)">
<path
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 58,45.375 H 47" />
<path
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 58,47.404661 H 47" />
</g>
<g transform="translate(0,14.095339)">
<path
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 58,45.375 H 47" />
<path
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 58,47.404661 H 47" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB