Fatal编程技术网
  • google-chrome/
  • Google chrome Chrome不呈现通过<；引用的SVG；img>；要素

Google chrome Chrome不呈现通过<；引用的SVG；img>；要素

google-chrome svg

Google chrome Chrome不呈现通过<；引用的SVG；img>；要素,google-chrome,svg,Google Chrome,Svg,我对google chrome没有使用img元素呈现svg存在问题。刷新页面和初始页面加载时会发生这种情况。我可以通过“检查元素”，然后右键单击svg文件并在新选项卡中打开svg文件来显示图像。然后，svg图像将呈现在原始页面上 <img src="../images/Aged-Brass.svg"> 在这里完全不知道问题是什么。svg图像在IE9和FF中呈现良好，而不是在Chrome或Safari中 我也设置了我的MIME类型。（image/svg+xml

我对google chrome没有使用
img
元素呈现svg存在问题。刷新页面和初始页面加载时会发生这种情况。我可以通过“检查元素”，然后右键单击svg文件并在新选项卡中打开svg文件来显示图像。然后，svg图像将呈现在原始页面上

<img src="../images/Aged-Brass.svg">
在这里完全不知道问题是什么。svg图像在IE9和FF中呈现良好，而不是在Chrome或Safari中

我也设置了我的MIME类型。（image/svg+xml）

编辑： 这里是一个简单的html页面，我构建它来帮助说明我的问题

<!DOCTYPE html>
<html>
<head>
    <title>SVG Test</title>

    <style>
        #BackgroundImage{
            background: url('../images/Aged-Brass.svg') no-repeat scroll left top;
            width: 400px;
            height: 600px;
        }

        #image_element {
            width: 400px;
            height: 600px;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="image_element">
        <img src="../images/Aged-Brass.svg">
    </div>
    <div id="BackgroundImage"></div>
</body>
</html>


SVG测试
#背景图像{
背景：url（'../images/Aged Brass.svg'）不重复左上滚动；
宽度：400px；
高度：600px；
}
#镜像元素{
宽度：400px；
高度：600px；
边际：0px；
填充：0px；
}
如您所见，我试图在
img
元素和css中使用svg文件作为背景图像。在chrome或safari中都无法处理初始页面加载。当我检查元素时，右键单击svg或在另一个窗口中单击链接到svg加载，svg文件将在“原始”选项卡中呈现。

我能够使用您的示例创建一个测试页面，它工作得很好。我的假设是您的svg文件有问题。你能把它也贴在这里吗？这是我用过的样品

 <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
   <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
   <g>
      <title>Layer 1</title>
      <ellipse ry="30" rx="30" id="svg_1" cy="50" cx="50" stroke-width="5" stroke="#000000" fill="#FF0000"/>
   </g>
 </svg>


第一层
我来这里是因为我有同样的问题， 当我检查元素时，我可以看到文件，但在站点上我看不到（即使使用localhost）

我的问题的答案是保存SVG文件。 如果您是从illustrator保存的，请确保单击“嵌入”而不是“链接”。as链接将只引用您的本地文件，而不包括数据（如果我理解正确的话）。

我在adobe网站上读到了这方面的内容，该网站还提供了一些其他有用的导出技巧

这对我很有效，希望有用。

我来这里是因为我有一个类似的问题，图像没有被渲染。我发现我的测试服务器的内容类型头不正确。我通过将以下内容添加到.htaccess文件中修复了它：

AddType image/svg+xml svg svgz
AddEncoding gzip svgz
使用
（当然，用您自己的URL替换每个URL）：

.BackgroundImage{
背景：url（'https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg'）不重复左上滚动；
宽度：400px；
高度：600px；
}

SVG测试
您的浏览器不支持SVG。

也有同样的问题。如果服务器配置正确且.htacces不是答案，则可能需要查看您嵌入的svg源代码。我的是用文本编辑器创建的，在Chrome&Safari的html5代码中表现良好，一旦嵌入，什么都看不见。
在svg代码中添加了正确的版本、尺寸等，效果非常好。
此外，所有样式都是内联的

即


svg标记需要名称空间属性xmlns:


<svg xmlns="http://www.w3.org/2000/svg"></svg>





看起来像个Chrome bug，
我做了些别的事，因为我差点发疯了。。。
如果更改屏幕上显示的svg对象的css，请使用Chrom调试器

所以我所做的是：
1.检查屏幕大小
2.收听我的SVG对象的“加载”事件
3.加载元素时，我使用jQuery更改其css
4.它帮了我的忙



if（jQuery（window）.width（）<769）{
jQuery（'object#mysvg logo'）[0]。addEventListener（'load'，function（）{
jQuery（“object#mysvg logo”）.css（'width'，'181px'）；
}，对）；
}


宽度：180px



您的浏览器不支持SVG
在添加了
DOCTYPE
之后，chrome也出现了同样的问题，它可以正常工作


<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">






之前


    <?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="792px" height="792px" viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve">
    <g fill="none" stroke="black" stroke-width="15">
  ......
  ......
  .......
  </g>
</svg>




......
......
.......


之后


    <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="792px" height="792px" viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve">
    <g fill="none" stroke="black" stroke-width="15">
  ......
  ......
  .......
  </g>
</svg>




......
......
.......

将width属性添加到[svg]标记（通过编辑svg源XML）对我很有用：
例如：



...  
...  

我有一个类似的问题，现有的答案要么不适用，要么有效，但由于其他原因，我们无法使用它们。所以我必须找出Chrome不喜欢我们的SVG的地方

在我们的例子中，SVG文件中
符号
标记的
id
属性中有一个
：
，这是Chrome不喜欢的。我一卸下
：
它就工作得很好

坏的：



...


好:



...

.svg
图像没有其初始高度和宽度。因此它是不可见的。你必须设置它

您可以在线或在css文件中执行以下操作：

行内：





Css文件：






.image{
宽度：100px；
高度：50px；
}

我最初从Photoshop CC导出了svg，不得不手动添加


version=“1.1”
插入
标记中


让它在chrome上显示
 在我的例子中，当我使用Photoshop创建并保存svg时，这个问题仍然存在。

有用的是，使用Illustrator打开文件，然后导出svg；根据
您必须使用文本编辑器（如记事本）打开.SVG文件并进行更改


xlink:href="data:img/png;base64,


致：


这对我有用
 我确保添加图像的样式。它对我有用


style=“width:320；height:240”
请注意，svg图像没有转换css属性

我现在不知道为什么，但如果你：

<!-- This didn't render -->
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
...  
</svg>

<!-- This did -->
<svg version="1.1" baseProfile="full" width="1000" xmlns="http://www.w3.org/2000/svg">
...  
</svg>



<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72">
    <defs>
        <symbol id="ThisIDHasAColon:AndChromeDoesNotLikeIt">
        ...
        </symbol>
    </defs>
    <use
        ....
        xlink:href="#ThisIDHasAColon:AndChromeDoesNotLikeIt"
    />
</svg>



<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72">
    <defs>
        <symbol id="NoMoreColon">
        ...
        </symbol>
    </defs>
    <use
        ....
        xlink:href="#NoMoreColon"
    />
</svg>



xlink:href="data:img/png;base64,



xlink:href="data:image/png;base64,



if( pageName.substring(pageName.lastIndexOf('.')) == '.svg' ) {
  res.writeHead(200, { "Content-Type": "image/svg+xml" });
}



Just replace <img> tag to <object> tag for SVG image.

<object data="assets/twitter-wrap.svg" type="image/svg+xml"></object>



mimetype.assign             = (
  ".pdf"          =>      "application/pdf",
  ".sig"          =>      "application/pgp-signature",
  ".spl"          =>      "application/futuresplash",
  ".class"        =>      "application/octet-stream",
  ".ps"           =>      "application/postscript",
  ".torrent"      =>      "application/x-bittorrent",
  ".dvi"          =>      "application/x-dvi",
  ".gz"           =>      "application/x-gzip",
  ".pac"          =>      "application/x-ns-proxy-autoconfig",
  ".swf"          =>      "application/x-shockwave-flash",
  ".tar.gz"       =>      "application/x-tgz",
  ".tgz"          =>      "application/x-tgz",
  ".tar"          =>      "application/x-tar",
  ".zip"          =>      "application/zip",
  ".mp3"          =>      "audio/mpeg",
  ".m3u"          =>      "audio/x-mpegurl",
  ".wma"          =>      "audio/x-ms-wma",
  ".wax"          =>      "audio/x-ms-wax",
  ".ogg"          =>      "application/ogg",
  ".wav"          =>      "audio/x-wav",
  ".gif"          =>      "image/gif",
  ".jpg"          =>      "image/jpeg",
  ".jpeg"         =>      "image/jpeg",
  ".png"          =>      "image/png",
  ".svg"          =>      "image/svg+xml",
  ".xbm"          =>      "image/x-xbitmap",
  ".xpm"          =>      "image/x-xpixmap",
  ".xwd"          =>      "image/x-xwindowdump",
  ".css"          =>      "text/css",
  ".html"         =>      "text/html",
  ".htm"          =>      "text/html",
  ".js"           =>      "text/javascript",
  ".asc"          =>      "text/plain",
  ".c"            =>      "text/plain",
  ".cpp"          =>      "text/plain",
  ".log"          =>      "text/plain",
  ".conf"         =>      "text/plain",
  ".text"         =>      "text/plain",
  ".txt"          =>      "text/plain",
  ".spec"         =>      "text/plain",
  ".dtd"          =>      "text/xml",
  ".xml"          =>      "text/xml",
  ".mpeg"         =>      "video/mpeg",
  ".mpg"          =>      "video/mpeg",
  ".mov"          =>      "video/quicktime",
  ".qt"           =>      "video/quicktime",
  ".avi"          =>      "video/x-msvideo",
  ".asf"          =>      "video/x-ms-asf",
  ".asx"          =>      "video/x-ms-asf",
  ".wmv"          =>      "video/x-ms-wmv",
  ".bz2"          =>      "application/x-bzip",
  ".tbz"          =>      "application/x-bzip-compressed-tar",
  ".tar.bz2"      =>      "application/x-bzip-compressed-tar",
  ".odt"          =>      "application/vnd.oasis.opendocument.text", 
  ".ods"          =>      "application/vnd.oasis.opendocument.spreadsheet", 
  ".odp"          =>      "application/vnd.oasis.opendocument.presentation", 
  ".odg"          =>      "application/vnd.oasis.opendocument.graphics", 
  ".odc"          =>      "application/vnd.oasis.opendocument.chart", 
  ".odf"          =>      "application/vnd.oasis.opendocument.formula", 
  ".odi"          =>      "application/vnd.oasis.opendocument.image", 
  ".odm"          =>      "application/vnd.oasis.opendocument.text-master", 
  ".ott"          =>      "application/vnd.oasis.opendocument.text-template",
  ".ots"          =>      "application/vnd.oasis.opendocument.spreadsheet-template",
  ".otp"          =>      "application/vnd.oasis.opendocument.presentation-template",
  ".otg"          =>      "application/vnd.oasis.opendocument.graphics-template",
  ".otc"          =>      "application/vnd.oasis.opendocument.chart-template",
  ".otf"          =>      "application/vnd.oasis.opendocument.formula-template",
  ".oti"          =>      "application/vnd.oasis.opendocument.image-template",
  ".oth"          =>      "application/vnd.oasis.opendocument.text-web",

# make the default mime type application/octet-stream.
  ""              =>      "application/octet-stream",
)