文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >SVG无法在矢量编辑器中正确打开或使用ImageMagick正确转换

问SVG无法在矢量编辑器中正确打开或使用ImageMagick正确转换
EN

Stack Overflow用户
提问于 2017-10-02 22:37:12
回答 1查看 54关注 0票数 0

我一直在努力解决如何在网页中适当地调整和缩放svg图像，并使其流畅。我已经决定放弃，并将其转换为png。

​

代码语言：javascript
复制
<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="1920" height="165px"
   viewBox="0 0 1920 165"
   >

  <defs>
    <style type="text/css">
      @import url('https://fonts.googleapis.com/css?family=Bitter');
      @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
      @import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
      @import url('https://fonts.googleapis.com/css?family=Volkhov|Vollkorn');
    </style>
    <style>
      :root {
      --graphics: #670309;
      --logo-text: #282B28;
      --services: #fff;
      --bottom-bar-font-size: 0.8em;
      }
      .house{
        fill: none;
        stroke: var(--graphics);
      }
      .bottom{
        fill: var(--graphics);
        stroke: none;
      }
      .logo{
        fill: var(--logo-text);
        stroke: none;
      }
      .features{
        fill: #282B28;
        stroke: none;
      }

      .services {
          fill: var(--services);
          stroke: none;
          text-anchor: start;
          alignment-baseline="middle"
          font-weight="400"
          font-family="Roboto Condensed"
          letter-spacing="0.03em"
      }

      .service {
        font-size: var(--bottom-bar-font-size);
        font-family="Roboto Condensed";
      }

      .separator {
        font-size: var(--bottom-bar-font-size);
        font-family="Roboto Condensed";
      }
    </style>
  </defs>

  <g id="whole-logo" transform="translate(0,0)scale(1)">
    <svg>
      <!--  ROOF  -->
      <path d="m 5 100 l 90 -50 l 90 50" stroke-width="15" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>

      <!--  CHIMNEY  -->
      <path d="m 155 60 l 0 20" stroke-width="15" stroke-linecap="butt" class="house"/>

      <!--  LEFT WALL -->
      <path d="m 25 90 l 0 60" stroke-width="12" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>

      <!--  RIGHT WALL -->
      <path d="m 165 90 l 0 60" stroke-width="12" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>

      <!--  DOOR  -->
      <rect x="60" y="95" height="45" width="25" class="features"/>

      <!--  SINGLE WINDOW DEFINITION -->
      <defs>
        <rect id="window" x="0" y="0" width="10" height="10" class="features"/>
      </defs>

      <!--  WINDOWS  -->
      <g transform="translate(105,95)">
        <use href="#window" transform="translate(0 0)"/>
        <use href="#window" transform="translate(0 12)"/>
        <use href="#window" transform="translate(12 0)"/>
        <use href="#window" transform="translate(12 12)"/>
      </g>

      <!--  BOTTOM BAR AND TEXT -->
      <g transform="translate(0,140)">
        <svg width="100%" height="25px">
          <rect x="0" y="0" width="100%" height="25px" class="bottom" stroke-width="0"/>
          <text x="1.5em" y="65%" class="services" font-family="Roboto Condensed" >
            <tspan class="service">residential</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">commercial</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">pre-purchase</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">pre-sale</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">warranty</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">expert-witness</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">sewer</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">radon</tspan>
          </text>

        </svg>
      </g>

      <!--  HOUSE DETECTIVES LLC  -->
      <g id="biz-name" transform="translate(265,140)scale(0.8)">
        <line x1="0" x2="500" y1="0" y2="0" style="stroke: green"></line>
        <text dx="70px" dy="0"
          text-anchor="start"
          font-size="38px"
          font-family="Roboto Slab"
          font-weight="bold"
          transform="rotate(-90)"
          class="logo">the</text>
        <text dx="0" dy="0"
          text-anchor="start"
          font-size="78px"
          font-family="Roboto Slab"
          font-weight="bold"
          class="logo">
            <tspan class="name" x="5" dx="0" dy="-73">House</tspan>
            <tspan class="name" x="-70" dx="0" dy="65">Detectives</tspan>
            <tspan class="name" x="0" dx="330" dy="-2" font-size="24px">llc</tspan>
        </text>
      </g>
    </svg>
  </g>
</svg>

​

我的svg在浏览器中呈现得很好，我已经用validator.nu对其进行了验证。但是，它不能在我尝试过的任何矢量编辑器中正确打开，包括Inkscape和其他编辑器。例如，Inkscape看起来像这样：

​

​

它也不能使用ImageMagick正确转换。

​

​

我和drawsvg.org走得很近

​

​

下一步我应该尝试什么？

svg
png
imagemagick-convert
EN

回答 1

Stack Overflow用户

发布于 2017-10-02 22:42:07

百分比值在viewBox属性中无效。viewBox属性的目的是告诉浏览器内容周围的边界框的尺寸。

在SVG的情况下，suitabel viewBox将是：

代码语言：javascript
复制
viewBox="0 0 620 165"

​

代码语言：javascript
复制
<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="100%" height="165px"
   viewBox="0 0 620 165"
   >

  <defs>
    <style type="text/css">
      @import url('https://fonts.googleapis.com/css?family=Bitter');
      @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
      @import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
      @import url('https://fonts.googleapis.com/css?family=Volkhov|Vollkorn');
    </style>
    <style>
      :root {
      --graphics: #670309;
      --logo-text: #282B28;
      --services: #fff;
      --bottom-bar-font-size: 0.8em;
      }
      .house{
        fill: none;
        stroke: var(--graphics);
      }
      .bottom{
        fill: var(--graphics);
        stroke: none;
      }
      .logo{
        fill: var(--logo-text);
        stroke: none;
      }
      .features{
        fill: #282B28;
        stroke: none;
      }

      .services {
          fill: var(--services);
          stroke: none;
          text-anchor: start;
          alignment-baseline="middle"
          font-weight="400"
          font-family="Roboto Condensed"
          letter-spacing="0.03em"
      }

      .service {
        font-size: var(--bottom-bar-font-size);
        font-family="Roboto Condensed";
      }

      .separator {
        font-size: var(--bottom-bar-font-size);
        font-family="Roboto Condensed";
      }
    </style>
  </defs>

  <g id="whole-logo" transform="translate(0,0)scale(1)">
    <svg>
      <!--  ROOF  -->
      <path d="m 5 100 l 90 -50 l 90 50" stroke-width="15" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>

      <!--  CHIMNEY  -->
      <path d="m 155 60 l 0 20" stroke-width="15" stroke-linecap="butt" class="house"/>

      <!--  LEFT WALL -->
      <path d="m 25 90 l 0 60" stroke-width="12" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>

      <!--  RIGHT WALL -->
      <path d="m 165 90 l 0 60" stroke-width="12" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>

      <!--  DOOR  -->
      <rect x="60" y="95" height="45" width="25" class="features"/>

      <!--  SINGLE WINDOW DEFINITION -->
      <defs>
        <rect id="window" x="0" y="0" width="10" height="10" class="features"/>
      </defs>

      <!--  WINDOWS  -->
      <g transform="translate(105,95)">
        <use href="#window" transform="translate(0 0)"/>
        <use href="#window" transform="translate(0 12)"/>
        <use href="#window" transform="translate(12 0)"/>
        <use href="#window" transform="translate(12 12)"/>
      </g>

      <!--  BOTTOM BAR AND TEXT -->
      <g transform="translate(0,140)">
        <svg width="100%" height="25px">
          <rect x="0" y="0" width="100%" height="25px" class="bottom" stroke-width="0"/>
          <text x="1.5em" y="65%" class="services" font-family="Roboto Condensed" >
            <tspan class="service">residential</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">commercial</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">pre-purchase</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">pre-sale</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">warranty</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">expert-witness</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">sewer</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">radon</tspan>
          </text>

        </svg>
      </g>

      <!--  HOUSE DETECTIVES LLC  -->
      <g id="biz-name" transform="translate(265,140)scale(0.8)">
        <line x1="0" x2="500" y1="0" y2="0" style="stroke: green"></line>
        <text dx="70px" dy="0"
          text-anchor="start"
          font-size="38px"
          font-family="Roboto Slab"
          font-weight="bold"
          transform="rotate(-90)"
          class="logo">the</text>
        <text dx="0" dy="0"
          text-anchor="start"
          font-size="78px"
          font-family="Roboto Slab"
          font-weight="bold"
          class="logo">
            <tspan class="name" x="5" dx="0" dy="-73">House</tspan>
            <tspan class="name" x="-70" dx="0" dy="65">Detectives</tspan>
            <tspan class="name" x="0" dx="330" dy="-2" font-size="24px">llc</tspan>
        </text>
      </g>
    </svg>
  </g>
</svg>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/46527716

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档