Question

使用SVG作为<img>的来源，这是一个有圆圈和时针的时钟。

<?xml version="1.0"?>
  <svg xmlns="http://www.w3.org/2000/svg">
  <g class="sprite" id="ico-watch" transform="scale(0.03125 0.03125)">
    <path d="M512 960c-282.317 0-512-229.683-512-512s229.683-512 512-512 512 229.683 512 512-229.683 512-512 512zM512-23.040c-259.727 0-471.040 211.292-471.040 471.040 0 259.727 211.313 471.040 471.040 471.040 259.748 0 471.040-211.313 471.040-471.040 0-259.748-211.292-471.040-471.040-471.040zM790.733 748.298c8.274-7.68 8.765-20.644 1.085-28.938l-225.587-243.057c4.444-8.499 7.209-18.043 7.209-28.303 0-15.79-6.124-30.065-15.933-40.94l84.808-156.344c5.407-9.933 1.7-22.364-8.233-27.75-3.092-1.679-6.431-2.478-9.748-2.478-7.27 0-14.316 3.871-18.022 10.711l-84.808 156.324c-3.113-0.492-6.246-0.963-9.503-0.963-33.935 0-61.44 27.505-61.44 61.44s27.505 61.44 61.44 61.44c8.663 0 16.896-1.843 24.371-5.079l225.403 242.852c7.7 8.335 20.623 8.786 28.959 1.085z" fill="#000000" stroke-width="1" />
  </g>
</svg>

演示： jsFiddle

问题：顶部像素不可见，圆圈不完整。添加padding-top:10px;动态起作用，但在添加到SVG文件本身时则不行。

Answer 1

使用SELECT * FROM `tx_branddata_info` WHERE `brand_title` LIKE 'BOEHLER' LIMIT 0 , 30有效，您只需要在视图框中重新定位svg。

由于您的SVG是一个带有小时钟的大空白区域，因此我在'Like'元素上使用translate(0, 60)来调整视口大小

＆＃13;

width="32" height="32"

＆＃13;

Answer 2

SVG it-self不在画布上。您可以通过使用viewBox属性重新定义画布来修复它

svg {
  outline: 1px solid blue;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -70 1030 1040" width="200">
  <g class="sprite" id="ico-watch">
    <path d="M512 960c-282.317 0-512-229.683-512-512s229.683-512 512-512 512 229.683 512 512-229.683 512-512 512zM512-23.040c-259.727 0-471.040 211.292-471.040 471.040 0 259.727 211.313 471.040 471.040 471.040 259.748 0 471.040-211.313 471.040-471.040 0-259.748-211.292-471.040-471.040-471.040zM790.733 748.298c8.274-7.68 8.765-20.644 1.085-28.938l-225.587-243.057c4.444-8.499 7.209-18.043 7.209-28.303 0-15.79-6.124-30.065-15.933-40.94l84.808-156.344c5.407-9.933 1.7-22.364-8.233-27.75-3.092-1.679-6.431-2.478-9.748-2.478-7.27 0-14.316 3.871-18.022 10.711l-84.808 156.324c-3.113-0.492-6.246-0.963-9.503-0.963-33.935 0-61.44 27.505-61.44 61.44s27.505 61.44 61.44 61.44c8.663 0 16.896-1.843 24.371-5.079l225.403 242.852c7.7 8.335 20.623 8.786 28.959 1.085z"
    fill="#000000" stroke-width="1" />
  </g>
</svg>

但是，我认为SVG本身存在一个真正的问题。圆圈甚至不是圆圈！你可以简化它，并通过从头开始重新创建一个干净的问题来消除你的画外问题。

svg {
  outline: 1px solid blue;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200">
  <g class="sprite" id="ico-watch" fill="none" stroke="black" stroke-width="4" stroke-linecap="round">
    <circle cx="50" cy="50" r="47"/>
    <circle cx="50" cy="50" r="6" fill="black" stroke="none"/>
    <path d="M50,50 l13,-22 M50,50 l25,25"/>
  </g>
</svg>

SVG - 顶部像素不可见

2 个答案: