Html 如何设置svg+；IE中的xml图像？

我试图在IE中设置svg+xml图像的最大宽度

请参见以下示例：

HTML:

原始SVG：

<?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" version="1.1" width="245" height="102">
    <path 
        stroke-linejoin="round" 
        stroke-linecap="round" 
        stroke-width="2" 
        stroke="rgb(51, 51, 51)" 
        fill="none" 
        d="M 77 37 c -0.05 -0.04 -2.62 -1.11 -3 -2 c -1.3 -3.04 -2.46 -8.04 -3 -12 c -0.44 -3.2 -0.42 -7.05 0 -10 c 0.19 -1.32 1.16 -2.88 2 -4 c 1.07 -1.42 2.53 -2.93 4 -4 c 2.09 -1.52 4.88 -3.72 7 -4 c 2.17 -0.29 5.58 1.12 8 2 c 1.06 0.38 2.27 1.17 3 2 c 1.45 1.66 3.17 3.93 4 6 c 1.06 2.64 1.58 6.03 2 9 c 0.23 1.61 0.46 3.61 0 5 c -0.74 2.23 -2.32 5.32 -4 7 c -1.97 1.97 -5.34 3.67 -8 5 c -1.16 0.58 -2.79 1.1 -4 1 l -8 -2"/>
    <path 
        stroke-linejoin="round" 
        stroke-linecap="round" 
        stroke-width="2" 
        stroke="rgb(51, 51, 51)" 
        fill="none" 
        d="M 133 38 c -0.14 -0.12 -6.43 -4.48 -8 -7 c -1.37 -2.18 -1.8 -6.21 -2 -9 c -0.11 -1.54 0.35 -3.52 1 -5 c 1.59 -3.63 3.43 -8.71 6 -11 c 2.67 -2.37 8.25 -4.29 12 -5 c 2.61 -0.5 6.39 0.35 9 1 c 1.04 0.26 2.34 1.15 3 2 c 1.48 1.9 2.93 4.66 4 7 c 0.55 1.2 0.91 2.67 1 4 c 0.23 3.22 0.23 6.78 0 10 c -0.09 1.33 -0.37 2.91 -1 4 c -1.54 2.64 -3.77 6.12 -6 8 c -1.7 1.44 -4.75 2.44 -7 3 c -1.48 0.37 -3.62 0.34 -5 0 c -1 -0.25 -1.94 -1.65 -3 -2 l -9 -2"/>
    <path 
        stroke-linejoin="round" 
        stroke-linecap="round" 
        stroke-width="2" 
        stroke="rgb(51, 51, 51)" 
        fill="none" 
        d="M 1 37 c 0.33 0.47 12.36 18.64 19 27 c 2.14 2.69 5.15 4.72 8 7 c 7.45 5.96 14.38 12.35 22 17 c 5.65 3.45 12.54 6.29 19 8 c 9.52 2.53 19.92 4.55 30 5 c 26.83 1.21 54.71 0.84 81 0 c 4.33 -0.14 8.85 -1.57 13 -3 c 5.44 -1.87 11.36 -4.26 16 -7 c 2.25 -1.33 4.48 -3.72 6 -6 c 7.57 -11.36 15.98 -23.96 22 -36 c 2.67 -5.33 3.95 -12.12 5 -18 c 0.56 -3.15 -0.34 -6.76 0 -10 l 2 -9"/>
    <path 
        stroke-linejoin="round" 
        stroke-linecap="round" 
        stroke-width="2" 
        stroke="rgb(51, 51, 51)" 
        fill="none" 
        d="M 102 53 c 0.02 0.09 0.33 3.56 1 5 c 1.54 3.29 3.9 7.19 6 10 c 0.65 0.87 2 1.75 3 2 c 1.38 0.34 3.76 0.56 5 0 c 1.94 -0.88 4.66 -3.28 6 -5 c 0.71 -0.91 0.91 -2.67 1 -4 c 0.23 -3.22 0 -10 0 -10"/>
    <path 
        stroke-linejoin="round" 
        stroke-linecap="round" 
        stroke-width="2" 
        stroke="rgb(51, 51, 51)" 
        fill="none" 
        d="M 84 22 l 1 1"/>
    <path 
        stroke-linejoin="round" 
        stroke-linecap="round" 
        stroke-width="2" 
        stroke="rgb(51, 51, 51)" 
        fill="none" 
        d="M 143 20 l 1 1"/>
</svg>

Firefox和Chrome会正确显示并设置最大宽度，例如：

最大宽度：100%

最大宽度：10%

它们通过缩放高度来匹配缩放宽度的百分比，从而使图像保持相同的纵横比

另一方面，IE10/11使图像倾斜：

最大宽度：IE中的10%

---

有人能帮我在IE10/11中实现这个功能吗？

你可以更新并尝试给定的css类

.signature-image {
    max-width:100%;
    width:100%; /* IE */
}

---

您可以在父类下进行如下更新：

.signature image svg{最大宽度：100%；宽度：100%；/*IE*/}

---

这对我很有用。

SVG根元素中是否指定了

宽度

和

高度

？@Sirko它是从jSignature（）自动生成的，但确实如此

width=“245”height=“102”

您可以尝试向SVG根元素添加和属性。

<?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" version="1.1" width="245" height="102">
    <path 
        stroke-linejoin="round" 
        stroke-linecap="round" 
        stroke-width="2" 
        stroke="rgb(51, 51, 51)" 
        fill="none" 
        d="M 77 37 c -0.05 -0.04 -2.62 -1.11 -3 -2 c -1.3 -3.04 -2.46 -8.04 -3 -12 c -0.44 -3.2 -0.42 -7.05 0 -10 c 0.19 -1.32 1.16 -2.88 2 -4 c 1.07 -1.42 2.53 -2.93 4 -4 c 2.09 -1.52 4.88 -3.72 7 -4 c 2.17 -0.29 5.58 1.12 8 2 c 1.06 0.38 2.27 1.17 3 2 c 1.45 1.66 3.17 3.93 4 6 c 1.06 2.64 1.58 6.03 2 9 c 0.23 1.61 0.46 3.61 0 5 c -0.74 2.23 -2.32 5.32 -4 7 c -1.97 1.97 -5.34 3.67 -8 5 c -1.16 0.58 -2.79 1.1 -4 1 l -8 -2"/>
    <path 
        stroke-linejoin="round" 
        stroke-linecap="round" 
        stroke-width="2" 
        stroke="rgb(51, 51, 51)" 
        fill="none" 
        d="M 133 38 c -0.14 -0.12 -6.43 -4.48 -8 -7 c -1.37 -2.18 -1.8 -6.21 -2 -9 c -0.11 -1.54 0.35 -3.52 1 -5 c 1.59 -3.63 3.43 -8.71 6 -11 c 2.67 -2.37 8.25 -4.29 12 -5 c 2.61 -0.5 6.39 0.35 9 1 c 1.04 0.26 2.34 1.15 3 2 c 1.48 1.9 2.93 4.66 4 7 c 0.55 1.2 0.91 2.67 1 4 c 0.23 3.22 0.23 6.78 0 10 c -0.09 1.33 -0.37 2.91 -1 4 c -1.54 2.64 -3.77 6.12 -6 8 c -1.7 1.44 -4.75 2.44 -7 3 c -1.48 0.37 -3.62 0.34 -5 0 c -1 -0.25 -1.94 -1.65 -3 -2 l -9 -2"/>
    <path 
        stroke-linejoin="round" 
        stroke-linecap="round" 
        stroke-width="2" 
        stroke="rgb(51, 51, 51)" 
        fill="none" 
        d="M 1 37 c 0.33 0.47 12.36 18.64 19 27 c 2.14 2.69 5.15 4.72 8 7 c 7.45 5.96 14.38 12.35 22 17 c 5.65 3.45 12.54 6.29 19 8 c 9.52 2.53 19.92 4.55 30 5 c 26.83 1.21 54.71 0.84 81 0 c 4.33 -0.14 8.85 -1.57 13 -3 c 5.44 -1.87 11.36 -4.26 16 -7 c 2.25 -1.33 4.48 -3.72 6 -6 c 7.57 -11.36 15.98 -23.96 22 -36 c 2.67 -5.33 3.95 -12.12 5 -18 c 0.56 -3.15 -0.34 -6.76 0 -10 l 2 -9"/>
    <path 
        stroke-linejoin="round" 
        stroke-linecap="round" 
        stroke-width="2" 
        stroke="rgb(51, 51, 51)" 
        fill="none" 
        d="M 102 53 c 0.02 0.09 0.33 3.56 1 5 c 1.54 3.29 3.9 7.19 6 10 c 0.65 0.87 2 1.75 3 2 c 1.38 0.34 3.76 0.56 5 0 c 1.94 -0.88 4.66 -3.28 6 -5 c 0.71 -0.91 0.91 -2.67 1 -4 c 0.23 -3.22 0 -10 0 -10"/>
    <path 
        stroke-linejoin="round" 
        stroke-linecap="round" 
        stroke-width="2" 
        stroke="rgb(51, 51, 51)" 
        fill="none" 
        d="M 84 22 l 1 1"/>
    <path 
        stroke-linejoin="round" 
        stroke-linecap="round" 
        stroke-width="2" 
        stroke="rgb(51, 51, 51)" 
        fill="none" 
        d="M 143 20 l 1 1"/>
</svg>

.signature-image {
    max-width:100%;
    width:100%; /* IE */
}