En el siguiente ejemplo, me gustaría entender por qué el svg de contenido .tag-buy no tiene su ancho y alto en 60px mientras que en HTML funciona. Con otro svg en la clase .tag-work funciona, ...

1
Laure PROTHAIS 4 mar. 2021 a las 17:10

1 respuesta

La mejor respuesta

La razón es porque tiene un atributo viewBox incorrecto. Se supone que es viewBox, no viewbox.

La razón por la que funciona el en línea es porque los SVG en línea se analizan utilizando reglas de análisis HTML, que son indulgentes con las mayúsculas y minúsculas. Pero los dos primeros se analizan utilizando reglas XML normales, lo que significa que los nombres de los elementos y atributos distinguen entre mayúsculas y minúsculas.

body { 
  padding: 0;
  margin: 0;
}

.wrapper { 
  width: 100px; 
  height: 80px; 
  background-color: #FFF; 
}

.tag-buy::after {
  content: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" height="60px" width="60px" viewBox="0 0 32 32"><path d="M28.273 12.397h-7.089v-3.676c0-2.817-2.288-5.121-5.104-5.121s-5.104 2.304-5.104 5.121v3.676h-7.296c-0.884 0-1.6 0.717-1.6 1.601 0 0.304 0.085 0.588 0.232 0.83l-0.004-0.007 6.172 13.58h14.88l6.285-13.58c0.145-0.24 0.275-0.522 0.275-0.823 0-0.884-0.763-1.6-1.647-1.6zM5.28 15.598h5.6l0.615 4.001h-4.329zM10.080 26l-1.92-4.001h3.705l0.615 4.001h-2.4zM17.28 26h-2.56l-0.64-4.001h3.84zM18.24 19.598h-4.32l-0.64-4.001h5.44zM18.784 12.397h-5.406l-0.004-3.676c-0-0.004-0-0.009-0-0.013 0-1.494 1.211-2.706 2.706-2.706s2.706 1.211 2.706 2.706c0 0.005 0 0.009-0 0.014v-0.001zM21.92 26h-2.41l0.65-4.001h3.68zM24.834 19.598h-4.376l0.502-4.001h5.605z"/></svg>');
  display: inline-block;
  width: 60px;
  height: 60px;
}

.tag-buy-bg::after {
  content: "";
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" ><path d="M28.273 12.397h-7.089v-3.676c0-2.817-2.288-5.121-5.104-5.121s-5.104 2.304-5.104 5.121v3.676h-7.296c-0.884 0-1.6 0.717-1.6 1.601 0 0.304 0.085 0.588 0.232 0.83l-0.004-0.007 6.172 13.58h14.88l6.285-13.58c0.145-0.24 0.275-0.522 0.275-0.823 0-0.884-0.763-1.6-1.647-1.6zM5.28 15.598h5.6l0.615 4.001h-4.329zM10.080 26l-1.92-4.001h3.705l0.615 4.001h-2.4zM17.28 26h-2.56l-0.64-4.001h3.84zM18.24 19.598h-4.32l-0.64-4.001h5.44zM18.784 12.397h-5.406l-0.004-3.676c-0-0.004-0-0.009-0-0.013 0-1.494 1.211-2.706 2.706-2.706s2.706 1.211 2.706 2.706c0 0.005 0 0.009-0 0.014v-0.001zM21.92 26h-2.41l0.65-4.001h3.68zM24.834 19.598h-4.376l0.502-4.001h5.605z"/></svg>');
  background-size: 60px 60px;
  display: inline-block;
  width: 60px;
  height: 60px;
}

.tag-work:after {
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm3.9-11.7L10 14.2l-1.9-1.9c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l2.6 2.6c.4.4 1 .4 1.4 0l6.6-6.6c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0z"/></svg>');
    display: inline-block;
    height: 60px;
    width: 60px;
}
<div class="wrapper tag-buy">
</div>

<div class="wrapper tag-buy-bg">
</div>

<div class="wrapper tag-work">
</div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="60px" height="60px" viewBox="0 0 32 32">
<path d="M28.273 12.397h-7.089v-3.676c0-2.817-2.288-5.121-5.104-5.121s-5.104 2.304-5.104 5.121v3.676h-7.296c-0.884 0-1.6 0.717-1.6 1.601 0 0.304 0.085 0.588 0.232 0.83l-0.004-0.007 6.172 13.58h14.88l6.285-13.58c0.145-0.24 0.275-0.522 0.275-0.823 0-0.884-0.763-1.6-1.647-1.6zM5.28 15.598h5.6l0.615 4.001h-4.329zM10.080 26l-1.92-4.001h3.705l0.615 4.001h-2.4zM17.28 26h-2.56l-0.64-4.001h3.84zM18.24 19.598h-4.32l-0.64-4.001h5.44zM18.784 12.397h-5.406l-0.004-3.676c-0-0.004-0-0.009-0-0.013 0-1.494 1.211-2.706 2.706-2.706s2.706 1.211 2.706 2.706c0 0.005 0 0.009-0 0.014v-0.001zM21.92 26h-2.41l0.65-4.001h3.68zM24.834 19.598h-4.376l0.502-4.001h5.605z"></path>
</svg>
2
Paul LeBeau 4 mar. 2021 a las 14:25