Jump to content
You must now use your email address to sign in [click for more info] ×

Michael Collins

Members
  • Posts

    6
  • Joined

  • Last visited

Everything posted by Michael Collins

  1. I did include the SVG files as text in my previous posts. You can just copy the code out and save it as a file. And I am including the second example since it shows more of the errors. This is the same as what I have in my previous post. It includes a style for the font and the dominant-baseline set to `auto`, `middle`, `hanging`, `mathematical` and `text-top`. The result should look like the image below. example.svg
  2. Here is another reference for you to use to help correct your import bug: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline They supply this SVG code: <svg width="400" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"> <!-- Materialization of anchors --> <path d="M60,20 L60,270 M30,20 L400,20 M30,70 L400,70 M30,120 L400,120 M30,170 L400,170 M30,220 L400,220 M30,270 L400,270" stroke="grey" /> <!-- Anchors in action --> <text dominant-baseline="auto" x="70" y="20">auto</text> <text dominant-baseline="middle" x="70" y="70">middle</text> <text dominant-baseline="hanging" x="70" y="170">hanging</text> <text dominant-baseline="mathematical" x="70" y="220">mathematical</text> <text dominant-baseline="text-top" x="70" y="270">text-top</text> <!-- Materialization of anchors --> <circle cx="60" cy="20" r="3" fill="red" /> <circle cx="60" cy="70" r="3" fill="red" /> <circle cx="60" cy="120" r="3" fill="red" /> <circle cx="60" cy="170" r="3" fill="red" /> <circle cx="60" cy="220" r="3" fill="red" /> <circle cx="60" cy="270" r="3" fill="red" /> <style><![CDATA[ text { font: bold 30px Verdana, Helvetica, Arial, sans-serif; } ]]></style> </svg> It it should produce the same as the browsers in the attached image. This also shows another problem where your import does not handle using styles in the SVG.
  3. I added dominant-baseline="hanging" into the <svg> tag and now Firefox works correctly but your import still does not. See attached file.
  4. Are you using the latest release version? YES 1.10.5.1342 Can you reproduce it? YES Does it happen for a new document? If not can you upload a document that shows the problem? Doc included If you cannot provide a sample document then please give an accurate description of the problem for example it should include most of the following: What is your operating system and version (Windows 10, OSX Mojave, iOS 12 etc)? Windows 10.0.1.19043 Is hardware acceleration (in Preferences > Performance) ON or OFF ? (and have you tried the other setting?) tried OFF and ON What happened for you (and what you expected to happen) The importation of text in an SVG does not properly support the alignment-baseline attribute and my text is placed at the wrong Y coordinate Provide a recipe for creating the problem (step-by-step what you did). The SVG that I have placed at the bottom of this message does not import correctly into Photo, Publisher or Designer. The Y coordinate is in the wrong place Screenshots (very handy) or a screen capture/video. Attached SVG Source code: <svg width="612" height="792" viewBox="0 0 612 792" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="612" height="792" fill="#FFFFFF" stroke="#000000" stroke-width="1"/> <rect x="36" y="36" width="36" height="36" fill="#DDDDFF" stroke="#000066" stroke-width="1"/> <path d="M 36 36 L 100 160 Q 130 200 150 120 C 190 -40 200 200 300 150 L 400 90 z" fill="none" stroke="black" stroke-width="2"/> <path d="M 100 100 L 200 100 L 150 200 z" fill="white" stroke="#00FFFF" stroke-width="1"/> <text x="36" y="36" alignment-baseline="hanging" font-family="Times New Roman" font-size="48" font-weight="bold" fill="red">This is a test!</text> <text x="36" y="36" alignment-baseline="hanging" font-family="Times New Roman" font-size="24" font-weight="bold" fill="green">This is a test!</text> <text x="36" y="36" alignment-baseline="hanging" font-family="Times New Roman" font-size="12" font-weight="bold" fill="blue">This is a test!</text> </svg> I have tested all of the alignment-baseline values and found several where your apps do not follow the rules. I am including several images that show the SVG in Chrome, Edge and Firefox as well as in Designer. (To test the different values change the value of alignment-baseline="hanging" to the each entry in the list of failing options at the end of this message) I will add that Firefox also seems to import these incorrectly. I have also tested these SVGs in Photo and Publisher and I assume you have the same import code for all three since they do the same things. Here is the link that describes how alignment-baseline is supposed to work https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/alignment-baseline List of values that are failing: mathematical hanging central text-before-edge middle baseline There may be others that depend on parent relationships, but this SVG does not dive that deep. Mike Collins CENTRAL HANGING MATHEMATICAL MIDDLE TEXT-BEFORE-EDGE
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.