我在Treehouse上做了一个响应式网页设计的教程.在本教程的这一点上,我们被要求将一个图像转换为一个svg,以便它可以完全响应性地扩展.
而不是使用我不拥有的Adobe Illustrator,而是使用了免费的Inkscape.一旦图像被转换,我们被要求在文本编辑器中打开图像,并从svg声明中移除高度和宽度要求,并将对象选择器添加到我们的最大宽度规则到我们的样式css：
img,object {
max-width: 100%;
}
但是,删除高度和宽度后,图像没有响应,而是像这样奇怪地剪辑：
对不起,如果问题提出之前,我找不到.
edit1,代码：
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) --> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-Syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="svg2985" version="1.1" inkscape:version="0.48.4 r9939" width="319" height="177" sodipodi:docname="logo.gif"> <Metadata id="Metadata2991"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title></dc:title> </cc:Work> </rdf:RDF> </Metadata> <defs id="defs2989" /> <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="640" inkscape:window-height="480" id="namedview2987" showgrid="false" inkscape:zoom="0.94984326" inkscape:cx="159.5" inkscape:cy="88.5" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="0" inkscape:current-layer="svg2985" /> <image width="319" height="177" xlink:href="
解决方法
事实上,您刚刚将光栅图像放在SVG中并不是您看到的真正原因.
这意味着当SVG的缩放工作正常(见下文)时,您将看不到使用矢量图形的好处.当您扩展矢量图形时,您不会在扩展位图时获得您所获得的“锯齿”(块).如果您的SVG仅包含位图,则与使用位图几乎相同.
这里的实际问题是Inkscape在其保存的SVG中不包含viewBox属性.
删除“width”和“height”属性时,它们默认为“100％”.这告诉浏览器缩放SVG以适应父容器.不幸的是,为了缩放工作,浏览器需要知道SVG内容的尺寸.这就是viewBox属性.
Illustrator添加了viewBox属性,Inkscape没有.
要查看我的意思,请将以下内容添加到您的< svg>删除宽度和高度后的标签：
viewBox="0 0 319 177"
您应该会发现,您的图像不再被剪辑,并且将在页面调整大小时调整大小.
