I have an SVG image which is designed to respond to various widths appropriately, but which should have a fixed height.

In every browser I've tested, including IE11, the SVG is emb,html,css,google-chrome,svg,microsoft-edge"/>

时间戳

首页 > 解决方案 > Microsoft Edge 使用时不考虑 SVG 中的高度 and

I have an SVG image which is designed to respond to various widths appropriately, but which should have a fixed height.

In every browser I've tested, including IE11, the SVG is emb

html - Microsoft Edge 使用时不考虑 SVG 中的高度 and

I have an SVG image which is designed to respond to various widths appropriately, but which should have a fixed height.

In every browser I've tested, including IE11, the SVG is emb

问题描述

I have an SVG image which is designed to respond to various widths appropriately, but which should have a fixed height.

In every browser I've tested, including IE11, the SVG is embedded honouring the width and height attributes in the <svg> element.

The SVG specifies a height (in pixels), which every browser except Edge uses. Edge simply sets the height of the SVG to 150 pixels.

Please see the following Plunk for a repro (my actual SVG is more complex, but relies on embedded, readable text):

http://embed.plnkr.co/maFExXewuzonQJ6y4uRr/

Repro

Chrome

Here's how it's supposed to look (Chrome 67): Rendering of SVG in Chrome 67

Edge

Here's what Edge does (38.14393.2068.0): enter image description here

viewBox

Common wisdom appears to be that to fix weird scaling issues in Edge, you should specify a viewBox on the top-level SVG. Unfortunately, that either preserves the aspect ratio of the wrong thing (cropping or shrinking important stuff), or stretches the contents of the SVG, including text - depending on the meetOrSlice componentn of preserveAspectRatio.

Options

I can't embed the raw SVG directly into the page, as it's generated dynamically by a server-side script and embedded into a CMS (which I can't write script for).

The generated height also varies, and can't be included in the HTML object embed code. This is because the SVG may include a variable number of lines of text.

It also has to be an <object> for interactivity.

What I can tweak is:

  • the generated SVG;
  • the properties of the <object> element;
  • the HTML surrounding the <object> (although minimizing this is preferred);

I can also include some CSS, and possibly some JS although I'd rather avoid a scripting solution if at all possible.

This is an expected behavior. If you have a field with string data type and then you want to convert that to a date data type, app maker won't do that for you. These are two different types of data. Since you've chosen to keep the data, the field was deleted from app maker's interface; however, the data is still available in google cloud sql. If you really want to keep the data, you'll have to create a new field with a different name, but if you really need the field with the same name and a different data type, you'll need to do the following:

  1. In app maker, go to the app settings: enter image description here

2.Then go the database and click on check: enter image description here

  1. You will be presented with the three options: enter image description here

In summary, appmaker is not able to create the field with the same name and different data type because the field name already exists in the sql backend. The only thing you can do is to completely delete that field and get rid of the data, or restore the field and continue using strings. I hope this helps!

标签： htmlcssgoogle-chromesvgmicrosoft-edge

解决方案

这是一个似乎可以在 Edge 中运行的基本 JavaScript 解决方案。

<object>元素有一个contentDocument属性，通过它可以直接访问 SVG，在它的 DOM 表示中。

访问 SVG DOM 意味着我们可以直接从 XML 中提取属性，并将它们戳到<object>元素上。

因此，例如（使用单个<object>元素）：

{
    let o = document.getElementsByTagName('object')[0];
    o.onload = function() {
        o.height = o.contentDocument.rootElement.getAttribute('height');
    }
}

找到一个不依赖 JS 的解决方案会很不错

此外，如果跨域加载 SVG，这种方法似乎不起作用。

推荐阅读